如何在jQuery中选择与this属性匹配的所有元素

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

本文关键字：元素 属性 this jQuery 选择      更新时间：2023-09-26

我想使用this选择器选择div中与所选元素具有相同属性的所有元素。

因此，在我的示例中，当我单击类为.foo的元素时，我希望在.container中查找与单击的元素共享相同data-index属性的所有元素，然后添加.bah类。目前，我的函数只将.bah添加到被点击的元素中，我了解如何选择某些属性，但不了解与this选择器有关的属性。

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>

您可以使用.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');
}); 

$(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/

相关文章：