jquery - 当我们有多个列表时循环 jquery 函数

Question

下面的脚本应该将“selected”类添加到无序列表中的项目，由它上面的跨度中的数字指示。

当我有一个跨度和列表的单个分区时它工作，但当我重复多次时它不起作用。

任何人都可以解释为什么并建议我如何重现它吗？

var selected = parseInt($(".number").html(), 10) - 1;
$('.number').parent(".quantity-select").find("li:eq("+selected+")").addClass("selected");

<div class="quantity-select">
<span class="number">1</span>
<ul id="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>
<div class="quantity-select">
<span class="number">3</span>
<ul id="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

Answer 1

selected 变量只选取第一个值，因此当您将它应用于多个列表时，您将使用相同的单个值。

您需要一个循环，并在它的每次迭代中获取 selected 值。 我建议按如下方式循环包装 div 元素:

$(".quantity-select").each(function () {
    var selected = $(".number", this).text() - 1;
    $("li:eq("+selected+")", this).addClass("selected");
});

.selected { background: yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity-select">
    <span class="number">1</span>
    <ul id="menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div class="quantity-select">
    <span class="number">3</span>
    <ul id="menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>