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

【问题标题】：looping the jquery function when we have multiple list当我们有多个列表时循环jquery函数
【发布时间】：2017-09-09 20:15:23
【问题描述】：

下面的脚本应该将“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>

【问题讨论】：

请告诉我们脚本应该做什么，而不是让我们每个人都知道。（您不是在发送邮件，而是在向知识库中添加一个主题，该主题将在未来几年内被查阅。）
嗨 Dirk，如果写了数字 3，则将“选定”类添加到第三个列表，如果写了数字 1，则将类添加到第一个列表。它应该在循环中，这样如果我们有多个“数量选择”块，那么脚本就必须工作。谢谢

标签： jquery html loops

【解决方案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>

【讨论】：