Выбор класса внутри класса

Question

У меня возникают проблемы с выбором класса внутри класса. Кажется, что элемент (ы) не хотят показывать. Я попробовал несколько методов, включая .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> 

и ЯШ:

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

, что происходит в том, что ваш селектор класса JQuery выбирает все HTML элементы с заданным классом. если вы выберете $(document).find(".test"), все элементы html с классом test будут возвращены внутри документа. Если вы сделаете $('.test').find(".test2"), все элементы html с классом test2 будут возвращены внутри элементов HTML с классом test.

дополнительная информация: 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(); 
});