javascript Jquery 选择器元素里面的其他
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10525651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery selector element inside other
提问by Edu Ruiz
I'm having a issue trying to built a nice "products" page, I have the html:
我在尝试构建一个不错的“产品”页面时遇到问题，我有 html：
<div class="product-box-2">
<a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
<p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
<a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
</div>
<div class="product-box-2">
<a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
<p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
<a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
</div>
And so many times it's needed. And then I try to put a nice effect on the .legend, with CSS to seting "display:none" and the Jquery:
很多时候都需要它。然后我尝试在 .legend 上添加一个很好的效果，使用 CSS 设置“display:none”和 Jquery：
$('.product-box-2 a').mouseenter(
function(){
$('.legend').fadeIn();
});
$('.product-box-2').mouseleave(
function(){
$('.legend').fadeOut();
});
But I have the same classes, and so, all legends appear when I put my mouse over some of the .product-box-2 a... And I have no idea how to select only the .legend inside the .product-box-2 a there I'm in.
但是我有相同的类，因此，当我将鼠标放在一些 .product-box-2 a 上时，所有图例都会出现......而且我不知道如何仅选择 .product-box 中的 .legend -2 我在那里。
If you want to see this in action, here it is!
如果你想看到它的实际效果，就在这里！
采纳答案by tvanfosson
Restrict the scope of the inner selector to the element on which the event occurred by giving it the element as the context. See the docsfor the signature that accepts a context.
通过将元素作为上下文，将内部选择器的范围限制为发生事件的元素。有关接受上下文的签名，请参阅文档。
$('.product-box-2 a').mouseenter(
function(){
$('.legend',$(this).closest('div')).fadeIn();
});
$('.product-box-2').mouseleave(
function(){
$('.legend',this).fadeOut();
});
回答by Tanveer
you can try .children([Selector])as well
你可以尝试.children([Selector])，以及
$('.product-box-2 a').mouseenter(
function(){
$(this).children('.legend').fadeIn();
});
$('.product-box-2').mouseleave(
function(){
$(this).children('.legend').fadeOut();
});
回答by zerkms
What you need is
你需要的是
$(this).find('.legend').fadeIn();
In this case $(this)refers to the element that triggered an event and .find()looks only among its children.
在这种情况下，$(this)指的是触发事件的元素，并且.find()只在其子元素中查找。
