Question

我需要一个动态的jquery或javascript代码，如果<div>是data-event-id=""元素上的重复元素，则它会隐藏所有<a>元素，因此，相同的属性，只有第一个。

父项应该像CSS display:none;的结果一样是不可见的，但是也可以在代码上“删除”它们，这并不重要。

由于我的知识仅限于CSS和HTML，因此我完全迷失了。

<div>
  <a data-event-id="87" href="https://google.com">1</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">2</a>
</div>
<div>
  <a data-event-id="87" href="https://google.com">3</a>
</div>
<div>
  <a data-event-id="20" href="https://google.com">4</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">5</a>
</div>

在此示例中，它应仅显示以下链接：

1 2 4

有人知道该怎么做吗？

Answer 1

非常简单：您可以遍历元素集合，并检查其dataset.eventId是否存在于唯一集合中，这可以通过利用{{3}}来完成，该{{3}}存储唯一值（因此它可以用作字典）。对于每次迭代，您：

检查eventId是否在集合中。如果是，请删除该节点
将eventId存储到您的唯一集中以供将来比较。

const elements = Array.from(document.querySelectorAll('a'));
const eventIds = new Set();

elements.forEach(element => {
  const eventId = element.dataset.eventId;
  if (eventIds.has(eventId)) {
    element.parentNode.remove();
  }
  eventIds.add(element.dataset.eventId);
});

<div>
  <a data-event-id="87" href="https://google.com">1</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">2</a>
</div>
<div>
  <a data-event-id="87" href="https://google.com">3</a>
</div>
<div>
  <a data-event-id="20" href="https://google.com">4</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">5</a>
</div>

Answer 2

使用jQuery，您可以查询所有a元素并对其进行迭代。您可以使用添加新发现的事件ID的数组来跟踪已知事件ID。如果ID已在该数组中，则只需隐藏父元素即可。

let events = [];
$('a').each(function(){
  let event_id = $(this).attr('data-event-id');
  if (!events.includes(event_id)) {
    events.push(event_id);
  } else {
    $(this).parent().hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a data-event-id="87" href="https://google.com">1</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">2</a>
</div>
<div>
  <a data-event-id="87" href="https://google.com">3</a>
</div>
<div>
  <a data-event-id="20" href="https://google.com">4</a>
</div>
<div>
  <a data-event-id="48" href="https://google.com">5</a>
</div>

Answer 3

您也可以使用:not(:first)").remove();

var i;
for (i = 0; i < 10; i++) { 
  $("[data-event-id$='" + i + "']:not(:first)").remove();
}

请参见fiddle

如何隐藏具有重复数据属性的孩子的所有父母

3 个答案: