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中有一个答案。试试这个，

＆＃13;

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");
    }
    }
  }); 
}

＆＃13;

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

＆＃13;

在这种情况下，jquery中的

.siblings()会有所帮助，

＆＃13;

$(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");
            }
        })
    });
});

＆＃13;

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

＆＃13;

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（Less verbose）

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

循环通过不工作的元素

4 个答案:

HTML

JS（更详细的例子）

JS（Less verbose）