Question

我有一个类似以下格式的代码。我不想两次显示内容。例如，文本'问题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>

Answer 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的{{1}}元素的文本存储在数组（a）中。

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

这里有效：http://jsfiddle.net/3kr2m/1/

Answer 2

以下是使用slice将 NodeList 转换为数组和forEach进行循环的原生 JavaScript 解决方案直接在 NodeList 上使用forEach似乎有一些问题），在节点上跟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

计算多少个ul标签具有特定内容的数量并仅显示一次

2 个答案: