我如何從jquery中的多個div中選擇特定的div

Question

我有這樣的東西，我需要在每個父節點的主div中顯示每個div稱為“plink”，所以我試圖淡入“.plink”但它為“plink”的所有div執行相同的功能

<script>

    $(document).ready(function(){
        $('.plink').hide();
        $('.project').mouseover(function(){
            $(this).next('.plink').fadeIn(400);
        });
        $('.project').mouseleave(function(){
            $(this).next('.plink').fadeOut(200);
        });

    });

</script>

<div class="project">
    <div class="plink">
        <div class="go"></div>
        <div class="goplus"><img src="images/more.png" border="0"/></div>
    </div>
    <div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
    <div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
    <div class="plink">
        <div class="go"></div>
        <div class="goplus"><img src="images/more.png" border="0"/></div>
    </div>
    <div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
    <div class="title">test2</div>
</div>

Answer 1

您可以使用find()而不是next() ...

$(this).find('.plink').fadeIn(400);

因為this是你的.project div，所以你需要“找到”你正在尋找的子元素。 使用next()意味着如果匹配選擇器，你將獲得下一個元素（即檢查下一個.project div是否與.plink選擇器匹配）

Answer 2

像musefan建議的那樣，我會去找FIND路線。 這是解決方案代碼：

http://jsfiddle.net/bx7YC/

<div class="project">
    <div class="plink">
        <div class="go">go</div>
        <div class="goplus">goplus</div>
     </div>
     <div class="pic">pic</div>
     <div class="title">Test1</div>
</div>

<div class="spacer_project"></div>

<div class="project">
    <div class="plink">
        <div class="go">go</div>
        <div class="goplus">goplus</div>
    </div>
    <div class="pic">pic</div>
    <div class="title">Test2</div>
</div>​

$('.plink').hide();

$('.project').mouseover(function(){
  $(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
  $(this).find('.plink').fadeOut(200);
});​

我用jsfiddle的簡單文本替換了破碎的img鏈接。