CODEWITHSUNDEEP
jqueryjquery-selectorsthis
Oliver Tappin
Oliver Tappin

Reputation: 2541

How to select .not(this) inside a particular element

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>

Upvotes: 2

Views: 2164

Answers (3)

Ja͢ck
Ja͢ck

Reputation: 173652

This is pretty straightforward when you use .siblings(). It's also anchored in the sense that it doesn't take <li> outside of the current <ul> into consideration.

Having said that, your initial selector of $('ul li'), unless intended, may not be appropriate if you later add more lists to the page.

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

  // Remove other divs with element currently shown
  $(this)
      .siblings() // get sibling li's
          .find('.hover') // and fadeout their inner .hover divs
              .fadeOut(200)
              .removeClass("not-me")
              .end()
          .end()
      .find('.hover')
          .fadeIn(200)
          .addClass("not-me")
});

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191789

.not only takes one argument. Also, it's impossible for anything to satisfy $(".hover").not(".hover"). Just use $(".hover").not(this)

http://api.jquery.com/not/

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 220086

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...

Upvotes: 3

Related Questions