时间戳

首页 > 解决方案 > 检查 DOM 中的重复链接

javascript - 检查 DOM 中的重复链接

问题描述

我正在尝试检测我的网站是否有具有相同 a href 链接的文章，以防止重复的文章显示在彼此的正下方。该网站是在 Wordpress 中构建的，我进行了以下查询以显示文章：

$popular = new WP_Query(
    array(
        'posts_per_page'=>4,
        'cat'=>[-48],  // don't display category with this ID in the array
        'meta_key'=>'popular_posts',
        'orderby'=>'meta_value_num',
        'order'=>'DESC',
        'date_query' => array(
            array(
                'after' => array(
                    'year'  => date('Y', $date ),
                    'month' => date('m', $date ),
                    'day'   => date('d', $date ),
                ),
            )
        )
    )
);

这被放在一个while循环中。另一个像这样的就在它下面的另一个 .php 文件中，它们都是通过具有该get_template_part函数的父文件加载的。

现在我编写了以下内容来记录我需要的链接：

jQuery(document).ready(function($){
    var links = document.querySelectorAll('.top-post .post-title a');
    for(var i = 0; i < links.length; i++){
        console.log(links[i].href);
    };

    var links2 = document.querySelectorAll('.tiles .post-title a');
    for(var i = 0; i < links2.length; i++){
        console.log(links2[i].href);
    };
});

这当然无助于我编写 if 语句，因为它们都在各自的 for 循环中，我无法访问它们。我还尝试在 for 循环之外创建一个 var 并尝试使用 += 存储它，但这只是将所有链接放在一行中，使我无法单独检查每个链接。

是否有可能检测到我的页面是否具有与我设置代码的方式相同的 href 链接，或者我是否必须尝试其他方法？

我将不胜感激任何可以帮助我的评论。

先感谢您！

编辑：我的意图是删除两篇文章中的一篇，因此链接所在的父 div。

标签： javascriptwordpressduplicates

解决方案

你可以把Sets.top-post a做成一个href。然后，当您迭代 时.tiles，检查是否Set包含href您正在迭代的项目：

const topHrefs = new Set(Array.prototype.map.call(
  document.querySelectorAll('.top-post .post-title a'),
  a => a.href
));
document.querySelectorAll('.tiles .post-title a').forEach((a) => {
  if (topHrefs.has(a.href)) {
    console.log('duplicate found: ' + a.href);
    // To remove the parent element of a found duplicate:
    a.parentElement.remove();
  }
});

推荐阅读