asked on

How do I insert li into ul based on an attribute?

Hi,
I have a <ul> like below and i need to insert a <li> based on msg-time attribute.
If msg-time=250, i need to insert it between msg-time 200 and 300

Need to insert
<li msg-time="250" class="msg-item"></li>

into
<ul id="msg-list">
<li msg-time="100" class="msg-item"></li>
<li msg-time="200" class="msg-item"></li>
<li msg-time="300" class="msg-item"></li>
<li msg-time="400" class="msg-item"></li>
<li msg-time="500" class="msg-item"></li>
</ul>

What is the best way? I may have many <li>, so I need to be efficient.

Thanks
Jamie

johnsy32

You could select the list item with the msg-time attribute of 200, and then append the new element after..

$('[msg-time=200]').after('<li msg-time="250" class="msg-item"></li>');

jamie_lynn

ASKER

Hi johnsy,

I don't know what the msg-time values in the <li> before hand. I can't hardcode the values

Thanks
Jamie

johnsy32

Hi

You could loop through each li item, and then test the msg-time attribute on each element...

$('#msg-list li').each(function() {

if ($(this).attr('msg-time') == 200) {
      $(this).after('<li msg-time="250" class="msg-item"></li>');
}

});

I'm not completely sure what you are trying to do. How is the list being built?

ASKER CERTIFIED SOLUTION

johnsy32

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jamie_lynn

ASKER

That works great! Thanks!