Question

I have a function which receives a list item. When it does, I want to add two divs to either side of the text in the list item: FOr example, when it receives the item:

<li class="sortedli">
  Call Type
</li>

it should become:

<li class="sortedli">
   <div class="sel-display-on">&nbsp;</div>
       Call Type
   <div class="sel-trash-on">&nbsp;</div>
</li>

However, my function

receive: function (event, ui) {
   $(this).prepend("<div class=\"sel-display-on\"></div>");
   $(this).append("<div class=\"sel-trash-on\"></div>");
}

Produces this markup:

<div class="sel-display-on"></div>
<li class="sortedli" style="">Caller Id</li>
<div class="sel-trash-on"></div>

How may I rectify this?

Answer 1

You’re appending/prepending to .sortedli‘s parent. Use context to find the right element:

receive: function (event, ui) {
   $('.sortedli', this).prepend("<div class=\"sel-display-on\"></div>");
   $('.sortedli', this).append("<div class=\"sel-trash-on\"></div>");
}