Question

我在选择课堂内的课时遇到了问题。似乎元素不想显示。我尝试了多种方法，包括.find（）和一个简单的（＆＃34; .outer .inner＆＃34;）选择，但似乎都不适用于我。

下面是一个简单格式的代码，希望能够澄清这个问题。

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

根据您的问题，您需要的是使用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();
});

Answer 2

我更新了你的小提琴：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")，则会返回包含类test2的HTML元素中包含类test的所有html元素。

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

问候和新年快乐;）

选择班级

2 个答案: