如何select jQuery 中具有匹配属性的所有元素？

Question

我想 select div 中与 selected 元素具有相同属性的所有元素，使用 this select或者.

所以在我的示例中，当我单击 class 为 .foo 的元素时，我想找到 .container 中共享相同 [=17] 的所有元素=]属性作为被点击的元素，然后添加.bah的class。目前我的功能只添加 .bah 到被点击的元素，我知道如何 select 某些属性但不涉及 this select 或。

Javascript:

$(document).on('click','.foo', function() {
        $(this).addClass('bah');
});

HTML:

<div class="container">
  <div class="inner1">
    <div data-index="0" class="foo">
      <p>item 1</p>
    </div>
    <div data-index="2" class="foo">
      <p>item 2</p>
    </div>
  </div>
  <div class="inner2">
    <div data-index="0" class="foo">
      <p>item 1</p>
    </div>
    <div data-index="2" class="foo">
      <p>item 2</p>
    </div>
  </div>
</div>

Answer 1

$(document).on('click','.foo', function() {
    var dataIndex = $(this).data('index');
    $(document).find("div[data-index='" + dataIndex + "']").each(function() {
        $(this).addClass('bah');
    });
});

示例Fiddle：http://jsfiddle.net/9huw0ym9/1/

Answer 2

您可以使用.filter()得到结果。

$(document).on('click','.foo', function() {
    var dataIndex = $(this).data('index');
    $('.container div').filter(function(){
        return $(this).data('index') === dataIndex
    }).addClass('bah');
});

或者使用基于属性的选择器。

$(document).on('click','.foo', function() {
    var dataIndex = $(this).data('index');
    $('.container div[data-index="'+dataIndex+'"]').addClass('bah');
});

如何select jQuery 中具有匹配属性的所有元素？

how to select all elements with matching attribute of this in jQuery?

html

javascript

jquery

attributes

this