计算有多少 ul 标签具有特定内容的数量并仅显示一次[重复]答案

【问题标题】：Count how many ul tags has number of specific content and display them only once [duplicate]计算有多少 ul 标签具有特定内容的数量并仅显示一次[重复]
【发布时间】：2013-06-26 08:02:05
【问题描述】：

我有如下格式的代码。我不想显示内容两次。例如，文本“问题 1”在第一个 ul 标签中重复了 4 次。我希望它使用 javascript/jquery 显示一次。谢谢。

<h3>Year 2010</h3>
<ul>
  <li><a href="2010/1/2">Issue 2</a></li>
  <li><a href="2010/1/1">Issue 1</a></li>
  <li><a href="2010/1/2">Issue 2</a></li>
  <li><a href="2010/1/1">Issue 1</a></li>
  <li><a href="2010/1/1">Issue 1</a></li>
  <li><a href="2010/1/1">Issue 1</a></li>
</ul>

<h3>Year 2011</h3>
<ul>
  <li><a href="2010/1/2">Issue 2</a></li>
  <li><a href="2010/1/1">Issue 1</a></li>
  <li><a href="2010/1/2">Issue 2</a></li>
  <li><a href="2010/1/2">Issue 2</a></li>
</ul>

【问题讨论】：

那么你为什么把它放在那里呢？或者是什么生成了那个 html？
也许可以看看api.jquery.com/jQuery.each，这对于迭代选择器非常有用

标签： javascript jquery

【解决方案1】：

试试这个：

$('ul').each(function(){
    var issues = [];
    $(this).find('li a').each(function(){
        var text = $(this).text();
        if($.inArray(text, issues) > -1){
            $(this).parent().remove();
        }else{
            issues.push(text);
        }
    });
});

它遍历每个ul，然后遍历其中的每个li a。它将每个 ul 的 a 元素的文本存储在一个数组 (issues) 中。

对于每个li a，它会检查文本是否已经添加到数组中（即它是重复的）。如果有，则删除父 li，如果没有，则将其添加到数组中。

它正在运行：http://jsfiddle.net/3kr2m/1/

【讨论】：

谢谢乔，这对我有用:)

【解决方案2】：

这是一个原生 JavaScript 解决方案，使用 slice 将 NodeList 转换为 Array 和 forEach 循环（使用 forEach直接在 NodeList 上似乎有一些问题），然后在类似于我们之前看到的节点上的 removeChild。

Array.prototype.slice.call(document.getElementsByTagName('ul')) // <ul>s to Array
    .forEach( // loop over them
        function (ul) {
            var text = {}; // record what we have seen
            Array.prototype.slice.call(ul.childNodes) // <li>s to Array
                .forEach(  // loop over these
                    function (li) {
                        if (li.nodeType !== 1 || li.tagName !== 'LI')
                            return; // only care about <li>s
                        if (text[li.textContent])
                            ul.removeChild(li); // seen it, remove
                        text[li.textContent] = 1; // mark seen
                    }
                );
        }
    );

Demo fiddle

当然，您可以改用for 或while 循环，这会更快一些，但需要您跟踪更多变量..

var ul, li, i, j, text;
ul = document.getElementsByTagName('ul');
for (i = 0; i < ul.length; ++i) { // loop over <ul>
    text = {}; // reset seen for each <ul>
    li = ul[i].childNodes;
    for (j = 0; j < li.length; ++j) { // loop over <ul> children
        if (li[j].nodeType === 1 && li[j].tagName === 'LI') { // only <li>
            if (text[li[j].textContent]) ul[i].removeChild(li[j]); // remove seen
            text[li[j].textContent] = 1; // mark seen
        }
    }
}

Demo of this

【讨论】：