1

for ループを介して動的に作成されているこれらの順序付けられていないリストが多数あります。問題は、この ul の要素のみをターゲットにすることができなかったことです。それぞれのアクティブのクラスを変更しています。兄弟とは何か、いとことは何かを理解するのに苦労していますアウト。 http://jsfiddle.net/T3cm4/

ここにHTMLがあります

<ul>
    <li><a href="#" class="button active">Option 1</a></li>
    <li><a href="#" class="button">Option 2</a></li>
    <li><a href="#" class="button">Option 3</a></li>
    <li><a href="#" class="button">Option 4</a</li>
</ul>

JS

var set_active = $('.button');
set_active.on('click', function() {
  var $this = $(this);
  var others = set_active.not($this);

  $this.addClass('active');
  others.removeClass('active');

// this will remove all other active 
// states, what do I need to add so 
// it only selects the siblings?

});
4

6 に答える 6

4

これだけに減らすことができます：

$('.button').click(function () {
    $(this).parents('ul').find('a.button').removeClass('active');
    $(this).addClass('active');
});

jsFiddle の例

これにより、クリック ハンドラーがボタン クラス ( .button) を持つリンクに割り当てられます。クリックすると、最初ulに見つかった親に移動し、すべての要素の子を検索してa.button、それらすべてからアクティブなクラスを削除します。次に、クリックされたばかりの要素にアクティブなクラスを適用します。

于 2013-03-20T20:48:09.983 に答える
1

あなたはそれをバインドすることができます

$('.button').on('click', function(e) {
    $('.button').removeClass('active'); //remove all classes
    $(this).addClass('active');  //add it to the clicked one
});
于 2013-03-20T20:46:06.553 に答える
1

あなたの例でthisは、 は<a>要素です。これは<li>要素の子であり、兄弟はありません。兄弟は、同じ <li>の他の子になります。アクセスしようとしているのは、 の親の兄弟の子です<this>。これらを選択してアクティブなクラスを削除する基本的な方法は、次の行を使用することです。

$(this).parent().siblings().children().removeClass('active');

$(this).parent()<li>の直接の親である単一の<a>を返し、 の子である要素の他$(this).parent().siblings()のすべての子の配列を返し、それらの要素のすべての子の配列を返します。これは、 のすべての配列です。あなたが探している要素。残りの回答でわかるように、これらすべての要素を選択する方法は他にもたくさんあります。<ul><li>$(this).parent().siblings().children()

これらのセレクターのいずれかで、メソッドに引数を追加することにより、返されるものをフィルタリングすることができます。たとえば<li>、クラス「foo」を持つ親の兄弟のみが必要な場合は$(this).parent().siblings('.foo')、これらの要素の配列を取得するために使用できます。

.find(selector)すべての子孫 (子、孫、ひ孫など)'.foo'を調べて、セレクターに一致するすべての要素の配列を返します。これは、"前の例の foo" クラス。

于 2013-03-20T20:55:32.967 に答える
0

他の人をそのように設定してみてください：

var others = set_active.parents('ul:eq(0)').find('.button').not($this);
于 2013-03-20T20:46:44.297 に答える
0 
$('ul li a').first().addClass('active');
$('ul li a').on('click', function() {
  var parents = $(this).parents('ul');
  $('li a', parents).removeClass('active');
  $(this).addClass('active');
});
于 2013-03-20T20:49:43.020 に答える
-1

クリックした要素にアクティブなクラスを追加し、他から削除します。 jsfiddle

var set_active = $('.button');
set_active.on('click', function() {
  set_active.parents("ul:first").find(".active").removeClass("active");   
  $(this).addClass('active');

});

于 2013-03-20T20:49:37.973 に答える