遍历不起作用的元素

Question

我想检查this元素是否具有与所有其他元素匹配的数据属性值，但是循环并不总是有效。

精简下面的代码。

HTML

<div class="list">
   <div class="target" data-post-id="1"></div>
   <div class="target" data-post-id="2"></div>
   <div class="target" data-post-id="1"></div>
   <div class="target" data-post-id="1"></div>
</div>

JS（事件绑定到target类）：

if ($(this).data("post-id") == $(this).closest('.list').find('.target').data("post-id")) {
   // do stuff
}

显然，我不知道如何正确遍历它。 有什么解决方案？

Answer 1

您可能会使用单线：

if ($(this).closest('.list').find('.target[data-post-id=' + $(this).data("post-id") + ']').not(this).length > 0) {
// there was at least one other element in the list with the same data-post-id as the clicked element
}

Answer 2

我有一个纯JavaScript的答案。 尝试这个，

 var divs = document.getElementsByClassName('list')[0].children; function divClick(element) { Array.from(divs).forEach(div => { if(element != div) { if (element.dataset.postId == div.dataset.postId) { console.log("equal"); } else { console.log("not equal"); } } }); } 

 <div class="list"> <div class="target" onclick="divClick(this)" data-post-id="1">One</div> <div class="target" onclick="divClick(this)" data-post-id="2">Two</div> <div class="target" onclick="divClick(this)" data-post-id="1">Three</div> <div class="target" onclick="divClick(this)" data-post-id="1">Four</div> </div> 

在这种情况下，jquery中的.siblings()会有所帮助，

 $(document).ready(function(){ $('.target').click(function(){ $.each($(this).siblings(), (div, element) => { if($(element).data("post-id") == $(this).data("post-id")) { console.log("Equal"); } else { console.log("Not Equal"); } }) }); }); 

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

Answer 3

这应该为您工作：

HTML

<div class="list">
  <div class="not-a-sibling">
    <div class="target" data-post-id="1"></div>
  </div>
  <div class="target" data-post-id="2"></div>
  <div class="not-a-target">I'M NOT A TARGET, LEAVE ME ALONE!</div>
  <div class="target" data-post-id="1"></div>
  <div class="target" data-post-id="1"></div>
  <div class="target" data-post-id="3"></div>
  <div class="target" data-post-id="3"></div>
</div>

---

假设您基于点击事件-显然，请将其更改为悬停或其他相关内容。

JS（更详细的示例）

$(document).on('click', '.target', function() {
  var clickedTarget = $(this);
  var clickedTargetPostId = clickedTarget.data('post-id');
  var elementsToCompare = clickedTarget.parents('.list').find('.target').not(this);

  elementsToCompare.each(function() {
    var elementToComparePostId = $(this).data('post-id');

    if (elementToComparePostId === clickedTargetPostId) {
      alert('Found a match!');
    }
  });
});

在这里测试：

https://jsfiddle.net/5wv40vq9/4/

JS（详细程度略）

$(document).on('click', '.target', function() {
  var _this = this;

  $(_this).parents('.list').find('.target').not(this).each(function() {
    if ($(this).data('post-id') === $(_this).data('post-id')) {
      alert('Found a match!');
    }
  });
});

https://jsfiddle.net/5wv40vq9/5/

Answer 4

你需要这样的东西吗？

var arr1 = [];
var arr2 = [];
$(".target").each(function(){
        arr1.push($(this).data("post-id"));
});

$(".target").each(function(index){
        var newArray = arr1.slice();
    newArray.splice(index, 1); // remove index value from an array, so this index != match its own
            console.log(newArray);
    if ($.inArray($(this).data("post-id"), newArray ) !== -1){
            $(this).text("Has A Match!");
    }else{
            $(this).text("No Match!");
    }

});

Jsfiddle此处： https ://jsfiddle.net/synz/votuqyp0/1/