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

Posted 2023-03-05

【中文标题】如何在特定元素内选择 .not(this)

【英文标题】：How to select .not(this) inside a particular element

【发布时间】：2013-01-16 09:31:54

【问题描述】：

我创建了一个函数，当单击 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"  />
</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"  />
</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"  />
</li>

【参考方案1】：

我想你正在寻找这个：

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

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

---

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

【讨论】：

不幸的是，我尝试了$(".hover").not(this)，但它不起作用。这是因为this 选择了li（来自$("ul li").click(function() ）。

完美，这正是我想要的。

@Titanium 请注意，您的'li' 选择器没有锚定到任何东西，所以如果您在页面上的某个地方有另一个<ul>，它也可能会受到影响。

在我的实际代码中，它被锚定到一个唯一的元素上，但出于本示例的目的，我将其删除。不过谢谢关心！

【参考方案2】：

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

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

【参考方案3】：

当您使用.siblings() 时，这非常简单。从某种意义上说，它也是锚定的，它不会将当前的<ul> 之外的<li> 考虑在内。

话虽如此，您的初始选择器 $('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")
);

【讨论】：

你说的很对，我用错字测试了它，它没有工作，但上面的代码也能正常工作。在这种情况下，我将使用 Joseph 的答案来节省几个字节，但它是 sibilings() 选择器的一个很好的例子。

我刚刚注意到你的函数负责淡入和淡出！

哈哈，好东西！只需将字符加起来看看什么会更有效（但我想这需要选择器如何链接到 jQuery）。但是后来我们进入了分钟数，这太荒谬了。两个很好的答案都非常有效！