jquery ui sortable receive(e,ui), how do I get a child of the incoming element so that I can show() it?

Question

I am using the receive event for my sortable list, I need the event to be able to change the style of one of the child elements of an element when it is dragged in from a draggable. Here's a simplified example:

    <ul id="sortable">
      <li>element1<div class="child"></div></li>
      <li>element2<div class="child"></div></li>
    <ul>

    <ul id="draggable">
      <li>element3<div class="child"></div></li>
      <li>element4<div class="child"></div></li>
    <ul>

With JS:

    $('#sortable').sortable(
    {
          //extra stuff excluded

              receive: function(e, ui)
                         {
                            //how do I use ui to get the child element "child"?
                            //also I need to be able to style the current li element
                         }
    }
);

    $('#draggable').draggable(
            {
          connectToSortable: '#sortable'
            }
    );

*Problem Solved: Answer is posted below by Frédéric Hamidi, but in short, the answer is to use the stop event rather than the receive event on the sortable.

Solution

In the receive event, ui.item will contain a jQuery object wrapping the dragged element. You can use children() or find() with a class selector to match its child element:

$("#sortable").sortable({
    receive: function(e, ui) {
        ui.item.css("color", "red");        // For example.
        ui.item.children(".child").show();  // Show child <div>.
    }
});

Update: Since you're using a cloned helper, you could use ui.helper instead of ui.item. However, that doesn't seem to give good results (maybe because the helper originates from another widget).

Another solution is to handle the stop event instead of receive. There, ui.item is always the new element, regardless of helper options:

$("#sortable").sortable({
    helper: "clone",
    items: "li",
    stop: function(e, ui) {
        ui.item.children(".child").show();
    }
});

You will find an updated fiddle here.

Comments

[ytudfollac]

hey, here is the jsfiddle: jsfiddle.net/spensimon/PeS2D/337 I need the copied dragged elements to be the one having the child element shown though, in this case, the original draggable child elements are the ones being effected. Thanks for your help!

[Frédéric Hamidi]

Indeed, the cloned helper complicates things a little. See my updated answer.

[ytudfollac]

That's definitely what I was looking for! Looks like I will have to move some stuff around in my code, but I think I can get it to work the way I want it to. Any idea on changing the css of the ui.item? I put "ui.item.css("color", "red");" in there and it still changes the original, not the new element?

[Frédéric Hamidi]

@ytudfollac, strange, ui.item.css(...) works for me (fiddle). Which browser are you using?

[ytudfollac]

haha, sorry about that, I actually pasted into the wrong fiddle! works now. Thanks!

[NullPointer]

Great solution ! Thumbs up (y)