jQuery insert after li element with attribute

Question

I have list:

<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

How can I insert my custom <li> after featured="1"? If all featured 0, then insert as first li.. Thanks in advance.

var self = this;
self.scope.find('.customList').prepend(myCustomItem); //this code inserts in begin, not after featured items..
$(myCustomItem).insertAfter('[data-featured="1"]'); //I've tried to build something.. but this fails

Sorry for my bad English

EDIT

myCustomItem.insertAfter('[data-featured="1"]'); looks like is working, but when there is any data-featured=1, then nothing happens. Any suggestions?

Please if any of the below answers helped you, don't forget to approve, by clicking the **Check Mark** at the left side of the answer. Good Luck ! — Mehdi Bouzidi, Oct 03 '17 at 10:42

Mehdi Bouzidi · Answer 1 · 2017-10-03T10:28:14.533

2

Use the jQuery attribute selector [attribute=value]:

$(" <li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

Or if you want to insert it after the first li tag the, use this:

$(" <li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li:first');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

edited Oct 03 '17 at 10:28

answered Oct 03 '17 at 10:03

Mehdi Bouzidi

1,937
3
15
31

This answer works.. why is it downvoted – ProEvilz Oct 03 '17 at 10:03
@ProEvilz as You I don't unedrstand why ! – Mehdi Bouzidi Oct 03 '17 at 10:04
Works if there are data-featured=1, but If all li elements have data-featured=0, then nothing happens – Laravel Oct 03 '17 at 10:06
2

You should be **EXTREMELY** straight forward given the example above with a simple if statement. I'm going to remove my answers and not bother helping as you're toxic. At this point it is being lazy. – ProEvilz Oct 03 '17 at 10:07
@MehdiBouzidi do you thing the html structure is correct. You are nested li within li by appending!!! why are you using `append()` when question is about insert after something? – RaJesh RiJo Oct 03 '17 at 10:22
@RaJeshRiJo Edition Done ! – Mehdi Bouzidi Oct 03 '17 at 10:28

score 1 · Accepted Answer · answered Oct 03 '17 at 10:40

You can first use the jQuery attribute selector [attribute=value]: to check if li with data-featured="1" is exist or not. If exist then use the jQuery method .insertAfter() to insert the new li after it and if not then insert new li at the first position using .insertBefore().

if($('.customList li[data-featured="1"]').length>0)
{
      $("<li data-featured='99'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');
}
else
{
      $("<li data-featured='99'>NEW ITEM</li>").insertBefore('.customList li:first');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="0">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

Glad it helps you. Cheers. – Mayur Patel Oct 03 '17 at 10:57 — Mayur Patel, Oct 03 '17 at 10:57

RaJesh RiJo · Answer 3 · 2017-10-03T10:28:31.520

First of all i would say don't use append() when the question is about insert after an li. Check below snippet, first check the condition for data-featured=1 available or not and then prepend() or insertAfter() based on that.

var flag = false;
$('.customList li').each(function() {
  if ($(this).data('featured') == '1') {
    flag = true;
  }
});
if (flag) {  
  $("<li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');
} else {
  $('.customList').prepend(" <li data-featured='222'>NEW ITEM</li>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
  <li data-featured="1">First item</li>
  <li data-featured="0">Another item</li>
  <li data-featured="0">Last item..</li>
</ul>

Mr.Bhanushali · Answer 4 · 2017-10-03T10:39:39.137

0

newStatus.insertAfter('[data-featured="1"]');

Works fine but just have to check for the case when the item added is the first item or not. That can be easily done by if condition. something like this:

if($('li[data-featured="1"]') != null)

here is the example: Link

edited Oct 03 '17 at 10:39

answered Oct 03 '17 at 10:19

Mr.Bhanushali

126
12

Almost here, but when I create `else { $('.customList').append(myCustomItem); }` Then else is not working, why? – Laravel Oct 03 '17 at 10:28
`myCustomItem` won't work directly, you need to write it like `$('ul').append("
myCustomItem

Mr.Bhanushali

Oct 03 '17 at 10:31

if myCustomItem is array the you need to take a loop. iterate the array and then add it back to

tag – Mr.Bhanushali Oct 03 '17 at 10:33

Nah, if I write `if($('li[data-featured="1"]') != null){alert('first');}else{alert('second');} And always I got alert first. Why?` – Laravel Oct 03 '17 at 10:33

if($('li[data-featured="1"]').val() != null) .... you need to take `.val()` like shown here. – Mr.Bhanushali Oct 03 '17 at 10:37

jQuery insert after li element with attribute

4 Answers4