如何在特定元素中选择.not(this)

时间:2013-02-01 05:03:37

标签: jquery jquery-selectors this

我创建了一个函数,当单击li元素时,该函数会淡化一些描述性信息。该函数淡化列表中的新信息。无法使用的行是$(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");,并了解它已降至.not(".hover", this)

我尝试了.not(this),但这种方法无效。大概是因为它的this部分仍然来自li元素,最初来自点击函数$("ul li").click(function() {

有没有办法成功使用.not(".hover", this)

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>

3 个答案:

答案 0 :(得分:3)

我认为你正在寻找这个:

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

将为您提供所有.hover个元素,不包括this的子元素。


您应该缓存$('li')对象...

答案 1 :(得分:1)

.not只接受一个参数。此外,任何事情都不可能满足$(".hover").not(".hover")。只需使用$(".hover").not(this)

即可

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

答案 2 :(得分:1)

使用.siblings()时,这非常简单。从某种意义上说,它也不会考虑当前<li>之外的<ul>

话虽如此,如果您稍后向页面添加更多列表,则除非有意,否则您$('ul li')的初始选择器可能不合适。

$("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")
});