How to get first instance of each string?

Question

Is there a method in jQuery to find the each element that contains the first instance of a string?

<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>

Hmm.. What should be on the result? The node element for that `
Best way you could probably do this is an iteration through nodes and an array of stored innerHTMLs — Sean, Jun 03 '19 at 03:14
Possible duplicate of [JQuery: Remove duplicate elements?](https://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements) — Tyler Roper, Jun 03 '19 at 03:30
Ther is not a built-in function in jQuery for this. You should probably re-design the part that builds this HTML if you can. — We Are All Monica, Jun 03 '19 at 03:42

score 2 · Answer 1 · answered Jun 03 '19 at 03:19

2

One option is using a Set object to track the <li>. Use filter to get all all <li> objects that is not found on Set object.

$(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>

answered Jun 03 '19 at 03:19

Eddie

26,593
6
36
58

1

Awesome solution. Love the usage of Set <3 – wentjun Jun 03 '19 at 03:31
You'll want to check browser compatibility before using `Set`. A more compatible way to do the same thing is `var obj = {}`, `obj[key] = true;` to add something to the set, and `if (obj[key])` to check membership. – We Are All Monica Jun 03 '19 at 03:45
Based on Doc, the basic usage of `Set` is compatible even with IE 11. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set.. Or you can use profiler (just to be sure) also :) – Eddie Jun 03 '19 at 03:50

Shidersz · Answer 2 · 2019-06-03T03:48:03.450

One possible solution is to use .filter() to get the elements whose text() are distinct from the previous li's text. Note this solution only works fine when the strings in the list are sorted, as you provided in the sample of input.

$(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>

If the list is guaranteed to be sorted then this will work fine. — We Are All Monica, Jun 03 '19 at 03:44

Santi · Answer 3 · 2019-06-03T03:52:37.757

You could use map() + get() to return an array of the elements' HTML.

Then, use [...new Set(Array)] to filter it down to only the unique items.

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>

As a reusable function:

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>

You'll want to check browser compatibility before using `...` and `Set`. — We Are All Monica, Jun 03 '19 at 03:43
@jnylen Not sure if that's directed at me or OP. OP hasn't specified browser constraints and so I don't think it's useful to preemptively hamstring my answer for Internet Explorer compatibility. Though they can choose not to use this if that's the case. — Santi, Jun 03 '19 at 03:49

score 0 · Answer 4 · answered Jun 03 '19 at 03:26

0

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

Demo: https://codepen.io/seyyedmojtaba72/pen/qGgRxG

answered Jun 03 '19 at 03:26

SeyyedMojtaba

1,245
1
9
17

score 0 · Answer 5 · answered Jun 03 '19 at 03:35

I tried to make a simple example:

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>

How to get first instance of each string?

5 Answers5