ループは、私は次のセットアップ持っ

Question

値：ユーザーが.target要素をクリックするたびに

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

を、私はにしたい最も近い内のすべてのdiv要素にコンテンツを行います.list。だから、同じデータ属性値を持つすべての人に何か...

のでpost-idデータ値1と.targetをユーザーがクリックする、それが必要ならば、私はjQueryを使ってこのタイプのループをどのように行うのですか？

Answer 1

ジャストIDをつかむませんし、その後残りを見つける - それぞれの必要性：jQueryのを使用して、クリックした要素と同一のdata-post-id値を持つすべての要素を通して

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

<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>

Answer 2

だけループを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>