Question

我试图将子div的数据属性与其父div进行比较，如果它们不匹配，则隐藏子元素。我希望能够比较父子关系的每个实例。 .test是父，.event是孩子。这就是我所拥有的。

    if ($(".event").data("campaign-id") != $(".event").parent().data("campaign-id")) {
        $(".event").hide();
    }

Answer 1

data作为getter返回集合中第一个选定元素的指定数据。当第一个.event元素的.event数据与其父campaign-id数据匹配时，您的脚本会隐藏所有campaign-id元素。您可以使用.filter()方法：

$(".event").filter(function() {
   return $(this).data("campaign-id") !== $(this.parentNode).data("campaign-id");
}).hide();

如果您获得data-campaign-id属性而不是jQuery存储的数据，则另一个选项是：

[].forEach.call(document.querySelectorAll('.event'), function(el) {
    var c = el.getAttribute('data-campaign-id'),
        p = el.parentNode.getAttribute('data-campaign-id');
    if ( c !== p ) {
        el.style.display = 'none';
    }
});

Answer 2

您可以使用.each()执行此任务：

 $(".event").each(function(){
     if($(this).data("campaign-id") != $(this).parent().data("campaign-id"))    
     {
          $(this).hide();
     }
 });

如何比较父母和孩子的数据属性？

2 个答案: