複数のリストを持つときにjquery関数をループする

Question

以下のスクリプトは、選択されていないクラスを、順不同リストの項目に追加する必要があります。

1つのスパンとリストを持つ1つの除算がある場合は機能しますが、複数回繰り返すと機能しません。

誰もがなぜそれを反論するのか、アドバイスしてくれますか？

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>