Question

我想使用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>

Answer 1

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

示例小提琴：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');
});

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

2 个答案: