Looping Through Elements Not Working

Question

I want to check if this element has a matching data attribute value to all other elements, but the loop doesn't always work. Stripped down code below. HTML

Solution 1:

You could probably use a one-liner:

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
}

Solution 2:

I have an answer in pure javascript. Try this,

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

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

.siblings() in jquery will be helpful in this case,

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

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

Solution 3:

Do you need something like this?

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 ownconsole.log(newArray);
    if ($.inArray($(this).data("post-id"), newArray ) !== -1){
            $(this).text("Has A Match!");
    }else{
            $(this).text("No Match!");
    }

});

Jsfiddle Here : https://jsfiddle.net/synz/votuqyp0/1/

Baca Juga

Solution 4:

This should work for you:

HTML

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

Assuming you're basing this on click event – obviously, change this to hover or whatever's relevant.

JS (More verbose example)

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

Test it out here:

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/

JavaScript Free