2012-08-03 92 views
1

我有這樣的事情,我需要顯示每個父母的主div的每個稱爲「plink」的div,所以我試圖淡入「.plink」但它做同樣功能的所有div的「砰砰」如何我可以選擇特定的div從多個div在jquery

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

回答

4

可以使用find()代替next() ...

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

因爲this是你.project格,那麼你需要「找到」你看的孩子元素爲...而努力。使用next()意味着你會得到非常下一個元素如果它選擇相匹配(即,它檢查是否下一個.project DIV的.plink選擇匹配)

+0

哇啊..我想你明白了他.. – 2012-08-03 13:59:54

+0

@wirey:是的..我不想,但我強迫自己穿過痛苦的障礙;) – musefan 2012-08-03 14:00:51

+1

不錯..還有一位繆斯粉絲! +1 :) – Arcturus 2012-08-03 14:01:07

0

我會去查找路徑一樣musefan建議。下面是解決方案代碼:

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的鏈接。