Question

jQuery中是否有一种方法可以找到包含字符串的第一个实例的每个元素？

<ul>
    <li>1</li> <-- find this
    <li>1</li>
    <li>1</li>
    <li>2</li> <-- find this
    <li>2</li>
    <li>3</li> <-- find this
    <li>3</li>
    <li>3</li>
    <li>3</li>
</ul>

Answer 1

一种选择是使用Set对象跟踪<li>。使用filter获取在<li>对象上找不到的所有所有Set对象。

$(function() {
  var found = new Set();
  var firstLI = $("ul > li").filter(function() {
    var text = $(this).text().trim();
    if (!found.has(text)) {
      found.add(text);
      return true;
    }

    return false;
  });

  //Testting
  firstLI.addClass("first");
});

.first {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li> <!-- find this -->
  <li>1</li>
  <li>1</li>
  <li>2</li> <!-- find this -->
  <li>2</li>
  <li>3</li> <!-- find this -->
  <li>3</li>
  <li>3</li>
  <li>3</li>
</ul>

Answer 2

一种可能的解决方案是使用.filter()获得其text()与先前的li's文本不同的元素。请注意，如您在输入示例中所提供的那样，只有对列表中的strings进行排序时，此解决方案才能正常工作。

$(document).ready(function()
{
    var items = $("#ulList li").filter(function()
    {
        return $(this).prev().text() !== $(this).text();
    });

    items.css("background-color", "skyblue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="ulList">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
</ul>

Answer 3

您可以使用map() + get()返回元素HTML的数组。

然后，使用[...new Set(Array)]将其过滤为仅唯一项。

var elems = $("ul > li").map(function() { return this.outerHTML }).get();
$("ul").html( [...new Set(elems)].join("\n") );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
</ul>

作为可重用功能：

const removeDuplicatesFrom = (selector) => {
  const $e = $(selector);
  if (!$e.length) return;

  const children = $e.children().map(function() { return this.outerHTML }).get();
  $e.html([...new Set(children)].join("\n"));
};

removeDuplicatesFrom("ul");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>2</li>
  <li>2</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
</ul>

Answer 4

$("ul li").each(function(){
    if ($(this).prev("li").html() != $(this).html()){
        $(this).addClass("first");
    }
});

演示： https://codepen.io/seyyedmojtaba72/pen/qGgRxG

Answer 5

我试图举一个简单的例子：

const values = new Set()

$("li").each((idx, element) => {
  values.add(element.textContent)
})

for (let value of values) {
  $(`li:contains('${value}'):first`).addClass("first")
}

.first {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
</ul>

如何获取每个字符串的第一个实例？

5 个答案: