jQuery的最接近類選擇

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div> 

<div class="wrap"> 
    <div class="Level2">Click me</div> 
    <div class="Level3">Information</div> 
</div>

jQuery的jQuery的最接近類選擇

$('.Level2').click(function(){ 
    $('.Level2').closest('.Level3').fadeToggle(); 
});

我想選擇最接近的3級到淡入淡出和，但不工作。我的語法錯了嗎？在線樣品：http://jsfiddle.net/meEUZ/

來源

2013-04-17 olo

嘗試.next()代替.closest()通過DOM元素的祖先橫穿。你

Working Demo

也應該使用$(this)而不是$('.Level2')否則它會選擇所有.Level2，而不是點擊一個。

你也可以去這樣的東西 - $(this).closest('.wrap').find('.Level3').fadeToggle();。

乾杯！

來源

2013-04-17 03:58:38 Rishabh

謝謝我試過'next'但沒有使用'this' – olo

鏈接不工作 – Ruwantha

答案的演示鏈接無法正常工作。請嘗試https://jsfiddle.net/o3h0m4ra/ – olo

最接近的旅行了dom樹。它不會找到一個兄弟姐妹。你可以使用一個找到父母來實現這一

$('.Level2').click(function(){ 
     $(this).parent().find('.Level3').fadeToggle(); 
    });

來源

2013-04-17 03:58:14 Rooster

感謝您的回答一個很多:-) – olo

幫了我很多！ –

jQuery的.closest()方法沒有選擇同胞選擇，但父母。看起來你正在尋找.siblings()方法。

來源

2013-04-17 03:58:17 ryanbrill

其實，我試過'兄弟姐妹'和'下一個'，但沒有使用'這個' – olo

是的！ closest從您傳遞給它的選擇器開始進行DOM搜索，然後向上搜索DOM層次結構，搜索父項/祖先。改爲使用siblings或next。像這樣：

$('.Level2').click(function(){ 
    $(this).siblings('.Level3').fadeToggle(); 
});

來源

2013-04-17 04:02:13

是的，有很多方法繳費jQuery中找到最接近DOM元素的

$('.Level1').click(function(){ 
 
    $(this).next('.Level3').fadeToggle(); 
 
}); 
 
$('.Level2').click(function(){ 
 
    $(this).closest('.wrap').find('.Level3').fadeToggle(); 
 

 
}); 
 
$('.Level4').click(function(){ 
 
    $(this).parent().find('.Level3').fadeToggle(); 
 
}); 
 

 
$('.Level5').click(function(){ 
 
    $(this).siblings('.Level3').fadeToggle(); 
 
});

.level{background:Red;width:200px;height:40px;} 
 
.Level3{background:blue;width:300px;height:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="Level1 level">Click me()sing next)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level2 level">Click me(Using closest)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level4 level">Click me(Usingh Parent)</div> 
 
    <div class="Level3">Information</div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="Level5 level">Click me(Using Sibiling)</div> 
 
    <div class="Level3">Information</div> 
 
</div>

來源

2018-02-10 06:29:49

jQuery的最接近類選擇

回答

相關問題