jQuery選擇元素內的其他

我在試圖建造一個漂亮的「產品」頁面中的問題，我有HTML：jQuery選擇元素內的其他

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

等多次它的需要。然後我嘗試把對.legend一個很好的效果，用CSS來塞汀「顯示：無」，Jquery的：

$('.product-box-2 a').mouseenter(
    function(){ 
    $('.legend').fadeIn(); 
}); 

$('.product-box-2').mouseleave(
    function(){ 
    $('.legend').fadeOut(); 
});

但我有同樣的課，所以，當我把所有出現的傳說我的鼠標放在一些.product-box-2上...並且我不知道如何只選擇.product-box-2裏面的.legend。

如果你想要要看到這個動作，here it is!

來源

2012-05-09 Edu Ruiz

可能重複[jQuery選擇：我點擊其中的內部參考類：（http://stackoverflow.com/questions/5695804/ jquery-selector-reference-class-inside-of-where-i-clicked） - 不同的事件，相同的問題。 jQuery文檔非常好，我建議你看看它：http：//api.jquery.com/。 –

Yeap，是同樣的問題，對此感到抱歉......但有時會發生，我知道在哪裏搜索，但不知道如何搜索，因此即使在這種情況下，我也需要一些人性幫助，你可以看到我真的在我的學習開始，然後有時真的很難知道「什麼」互聯網。 –

不需要抱歉，我不會責怪你:)我知道有時很難通過搜索找到答案。如果有更多的人會投票結束重複（一般），我會很高興，這樣我們就不會一遍又一遍地混淆網頁上的同一個答案： -/ –

通過將內部選擇器的作用域作爲上下文，限制它發生事件的元素的範圍。有關接受上下文的簽名，請參閱the docs。

$('.product-box-2 a').mouseenter(
    function(){ 
    $('.legend',$(this).closest('div')).fadeIn(); 
}); 
$('.product-box-2').mouseleave(
    function(){ 
    $('.legend',this).fadeOut(); 
});

來源

2012-05-09 23:42:03 tvanfosson

對不起，我試過了，但沒有'在這裏工作，並顯示沒有錯誤，所以我不知道爲什麼不工作。 –

對不起，我沒有注意到錨標籤選擇器，你必須首先作爲上下文去最接近的div。 – tvanfosson

工程太棒了！真的非常感謝！ –

你需要的是

$(this).find('.legend').fadeIn();

在這種情況下$(this)指觸發一個事件，並.find()不僅看起來它的兒童中的元素。

來源

2012-05-09 23:42:53 zerkms

非常感謝，它的工作。但是隻有一件壞事，現在我必須設置這意味着$（'。product-box-2 a'）。mouseenter' ，我的'.product-box-2'的某些部分會顯示圖例，但不會鏈接... –

@Eduardo Ruiz：我不明白你的意思 – zerkms

在這個解決方案中，我必須使用父元素來觸發，但我想要的是使用圖像和鏈接（'.legend'的兄弟）來觸發事件，所以上面的答案可以解決這個問題。啊，並感謝有關'.find（）'的解釋，這對我來說是新的。 –

你可以嘗試.children([Selector])以及

$('.product-box-2 a').mouseenter(
    function(){ 
    $(this).children('.legend').fadeIn(); 
}); 

$('.product-box-2').mouseleave(
    function(){ 
    $(this).children('.legend').fadeOut(); 
});

http://api.jquery.com/children/

的

來源

2012-05-11 10:23:44 Tanveer

jQuery選擇元素內的其他

回答

相關問題