在班級內選擇班級

Question

我在班級內選擇班級有問題。看起來元素（s）不想顯示。我已經嘗試了多種方法，包括.find（）和一個簡單的（「.outer .inner」）選擇，但對我而言都不起作用。

下面是簡單格式的代碼，希望能夠澄清問題。

https://jsfiddle.net/ruo92tuc/

HTML

<a href="#" class="section01">Section 1</a> 

<a href="#" class="sub1">Sub menu 1</a> 

<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 

<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 

JQUERY

$(".sub1").hide(); 
$(".sub2").hide(); 

$(".section01").click(function() { 
    $('.section01').find(".sub1").show(); 
}); 

Answer 1

我更新您的提琴：https://jsfiddle.net/ruo92tuc/3/

$(".section01").click(function() { 
    $(document).find(".sub1").show(); 
}); 

，如果你想使用你的javascript函數就像你寫的那樣，你需要將html元素嵌套在對方內。

<div class="1"> 
    <div class="1.1"></div> 
    <div class="1.1"></div> 
</div> 
<div class="2"> 
    <div class="2.1"></div> 
    <div class="2.1"></div> 
</div> 

和JS：

$(".1").click(function() { 
    $(this).find(".1.1").show(); 
}); 

發生的事情是，你的jQuery類選擇，選擇所有具有給定類中的HTML元素。如果選擇$(document).find(".test")，則將返回文檔內部具有類test的所有html元素。如果你這樣做$('.test').find(".test2")將會返回所有帶有test類的HTML元素中test2類的html元素。

進一步的信息：https://api.jquery.com/category/selectors/

的問候和新年快樂;）

Answer 2

根據您的問題，你需要的是用siblings，不find。 find做的是搜索全部該元素的子項。 children搜索立即選擇器的子元素。所以，如果我們保留相同的HTML，

<a href="#" class="section01">Section 1</a> 

<a href="#" class="sub1">Sub menu 1</a> 

<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 
<a href="#" class="sub2">Sub menu 2</a> 

<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 
<a href="#" class="sub1">Sub menu 1</a> 

$('.section01').click(function(e) { 
    $(this).siblings('.sub1').show(); 
});