如何使用jQuery查找parent.sibling选择？

Question

我有一个包含产品的列表，每个产品都有一个选择，您可以在其中选择所需的项目数，当我点击id =“laggtillikundvagn”时，我需要找到选择的值。

如果我在页面上只有一个选择，那么这就是$(document).find('#shopform select[id=antal]').val()

所以我尝试了这个的变种。

console.log(
  $(this).parents().siblings().find('#shopform select[id=antal]').val()
)  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-content-inner">

  <select id="antal" class="antal SumoUnder" name="antal">

    <option value="1">1</option>
    <option value="2">2</option>

  </select>

</div>

<div class="card-footer notranslate">

  <div>
    <a href="#" id="laggtillikundvagn" class="kundvagnknapp" data-produktid="790">ADD IT</a>
  </div>


</div>
The next product, with a new select comes here....

那么如何从select中获取值？

Answer 1

1. 不要使用ID，因为它显然是重复的
2. 使用相对于你想要的兄弟姐妹：
3. 更好的想法是使用data-produktid，如第二个例子：

$(".kundvagnknapp").on("click", function(e) {
  e.preventDefault(); // stop link

  console.log(
    $(this).closest(".card-footer") // parent's parent
      .prev()          // sibling div
      .find('.antal')  // select
      .val()
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-content-inner">

  <select class="antal SumoUnder" name="antal">

    <option value="1">1</option>
    <option value="2">2</option>

  </select>

</div>

<div class="card-footer notranslate">

  <div>
    <a href="#" class="kundvagnknapp" data-produktid="790">ADD IT</a>
  </div>


</div>

完全解决它：

$(".kundvagnknapp").on("click", function(e) {
  e.preventDefault(); // stop link

  console.log(
    $("#div_"+$(this).attr("data-produktid")+" .antal").val()
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-content-inner" id="div_790">

  <select class="antal SumoUnder" name="antal">

    <option value="1">1</option>
    <option value="2">2</option>

  </select>

</div>

<div class="card-footer notranslate">

  <div>
    <a href="#" class="kundvagnknapp" data-produktid="790">ADD IT</a>
  </div>


</div>