Question

我有以下设置：

    $( document ).on( 'click touch', '.target', function() {
        if ($(this).data("post-id") == $(this).closest('.list').find('.target').data("post-id")) {
           alert('do stuff');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
</div>

每当用户点击.target元素时，我希望对所有内容进行最近.list内的所有div。因此，如果用户使用.target数据值post-id点击1，那么对于具有相同数据属性值的所有其他人来说应该是这样......

如何使用jQuery进行此类循环？

Answer 1

只需抓住ID，然后找到其余的 - 不需要每个：

write number: 24
24=2*2*2*3

$(document).on('click touch', '.target', function() {
  var id = $(this).data("post-id"), $list=$(this).closest(".list");
  $list.find(".target").removeClass("red") // reset in list
  $list.find(".target[data-post-id=" + id + "]").addClass("red"); // set same IDs
});

.red {
  color: red
}

Answer 2

使用jQuery的data-post-id循环浏览与所单击元素具有相同each()值的所有元素。

$( document ).on( 'click touch', '.target', function() {
    $("[data-post-id=" + $(this).data('post-id') + "]").each(function(){
        $(this).css("color", "red");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="list">
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
</div>

Answer 3

如何实现结果还有更多方法。

我在上一次运行中添加了删除类名，它为最后选择的项目添加了红色。

$( document ).on( 'click touch', '.target', function() {
    var postID = $(this).data("post-id");
    
    $('.red').removeClass('red');
    
    $('.target').each(function() {
        var el = $(this);

        if (el.data('post-id') == postID) {
            el.addClass('red');
        }
    });
});

.red {background: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="1">a</div></div>
  <div><div class="target" data-post-id="2">b</div></div>
</div>

循环遍历具有匹配数据属性值的元素

3 个答案: