Question

I have created a function that fades in some descriptive information when an li element is clicked. The function fades the new information within the list. The line that is not working is $(".hover").not(".hover", this).fadeOut(200).removeClass("not-me"); and understand that it is down to .not(".hover", this).

I have tried .not(this) but this is not working correctly. Presumably because the this part of it is still selected from the li element, originally from the click function $("ul li").click(function() {.

Is there a way to use .not(".hover", this) successfully?

jQuery:

$("ul li").click(function() {

  // Remove other divs with element currently shown
  $(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");

  // Stop chosen element from fading out
  $(".hover", this).addClass("not-me").fadeIn(200);

});

HTML:

<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/1.jpg" alt="" />
</li>
<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/2.jpg" alt="" />
</li>
<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/3.jpg" alt="" />
</li>

Answer 1

I think you’re looking for this:

$("li").not(this).find(".hover");

which will give you all .hover elements, excluding children of this.

---

You should probably cache that $('li') object…