異なるドロップダウンのjqueryを書く方法

Question

私はページ内に2つの異なるドロップダウンを作ろうとしています。私は、このブートストラップコード書いてきました -

<div class="box"> 
    <div class="box-header black"> 
     <div class="col-md-1"></div> 
     <div class="col-md-3"> 
      Set Point Management: 
     </div> 
     <div class="col-md-1"> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle info" data-toggle="dropdown" href="#"> 
        Optimized <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Manual</a></li> 
        <li><a href="#">Scheduled</a></li> 
        <li><a href="#">Optimized</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

    <div class="box-body"> 
     <div class="col-md-1"></div> 
     <div class="col-sm-3 col-md-3"> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
        Select Operator <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">=</a></li> 
        <li><a href="#">></a></li> 
        <li><a href="#"><</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

を、私はそれが1つのドロップダウンで正常に動作して選択コンポーネント -

<script type="text/javascript"> 
    $(".dropdown-menu li a").click(function() { 
     $(".btn:first-child").html($(this).text() + ' <span class="caret"></span>'); 
    }); 
</script> 

とドロップダウンの名前を変更するには、このjqueryのを使用しています。しかし、2回のドロップダウンでは、1つのドロップダウンで項目を選択すると、両方のドロップダウンで名前タグが変わります。

私はidを与えることによってそれらを区別しようとしましたが、うまくいきませんでした。 それでjqueryを書くべきですか？

（ステップ賢明な答えが参考になる）

Answer 1

{selector}:first-child疑似クラス親要素*内の指定されたセレクタの最初の子を指します。あなたの行$(".btn:first-child")は親を指定していないので、あなたのページの両方の.btn要素が選択されています。次にその行を変更した場合はそれが動作するはずです：

$(".btn:first-child", $(this).closest("div.btn-group")).html(...) 

2番目のパラメータは、この場合にbtn-でA-要素に最も近いdiv要素となってセレクタを検索することで要素を与えますグループクラス。

を明確にするため、この例では、両方のスパンが選択されるであろう*：

var span = $('span:first-child'); 

... 

<div> 
    <span>Alice</span> 
</div> 
<div> 
    <span>Bob</span> 
</div> 

一方のみアリスが選択されているこの例では：

var span = $('span:first-child'); 

... 

<div> 
    <span>Alice</span> 
    <span>Bob</span> 
</div> 

Answer 2

私は、これはあなたが

jsfiddle

コード探しているものだと思う：

$(".dropdown-menu").each(function() { 
var trigger = $(this).find("li a") 
var change = $(this).prev(".btn") 
    $(trigger).click(function() { 
     $(change).html($(this).text() + ' <span class="caret"></span>'); 
    }); 
});