Question

Basically, I want to append a div to an li element on mouseenter, then append a separate div on mouseenter of another li element of the same parent ul. So if an li is hovered, append #div1, then if another li is hovered, append #div2.

This is what I have so far

$('ul > li').mouseenter(function (){
      $('#div1').appendTo(this);

      if (('ul > li').mouseenter().not(this)){
         $('#div2')appendTo(this);
      }
});

This only appends #div1 to the hovered li. How do I append #div2 if another li is hovered? The .not() selector doesn’t seem to be working. Thanks in advance.

Answer 1

I’d suggest the following:

$('li').mouseenter(
    function(){
        var that = $(this),
            i = that.index();
        if (i == 0){
            $('#div1').appendTo(that);
        }
        else {
            $('#div2').appendTo(that);
        }
    });

The above is based on the assumption that you wish to append #div1 to the first li, and #div2 to all other li elements.

---

Edited in response to comment from OP (left below):

I actually want to append #div1 on mouseenter then if another li is hovered, i’d like to append #div2 to the same li that #div1 was appended to.

$('li').mouseenter(
    function(){
        var that = $(this),
            i = that.index();
        if (i == 0){
            $('#div1').appendTo(that);
        }
        else {
            $('#div2').appendTo($('#div1').closest('li'));
        }
    })

References:

• appendTo().
• closest().
• index().