Question

我正在努力理解为什么以下代码中的第二个变体不起作用。我是使用错误的选择器还是在这种情况下，唯一的选择是find（）方法或一长串child（）方法？

var list = $(".element-details-container.active");
for (var i = 0; i < list.length; i++) {
  var $listElement = $(list[i]);

  var test = $listElement.children("div.content-module").children("input[id$=elementType]"); //Working

  var test2 = $listElement.children("div.content-module > input[id$=elementType]"); //Not working

  var test3 = $listElement.find("div.content-module > input[id$=elementType]"); //Working
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element-details-container active">
  <div class="content-module"><input id="details_0__elementType" /></div>
</div>
<div class="element-details-container active">
  <div class="content-module"><input id="details_1__elementType" /></div>
</div>
<div class="element-details-container">
  <div class="content-module"><input id="details_2__elementType" /></div>
</div>

Answer 1

children()方法隐式遍历$listElement的所有子元素，并检查它们是否与您提供的选择器匹配。

由于在第二个示例div.content-module > input[id$=elementType]中将选择器与后代运算符一起使用时，检查不可能返回true。这就是第一个示例起作用的原因。因为您在多个children()调用中检查了每个班级。

Answer 2

.children()方法仅从其附加的jQuery元素下搜索1级。因此，在您的示例中，所有这些选择器都将返回相同的元素：

$listElement.children();
$listElement.children("div");
$listElement.children(".content-module");
$listElement.children("div.content-module");

除非您要定位的子元素上有不同的类，否则无需太具体：

<div class="element-details-container active">
  <div class="top-module"><input id="details_0__elementType" /></div>
</div>
<div class="element-details-container active">
  <div class="content-module"><input id="details_1__elementType" /></div>
</div>

<script>
  $listElement.children(); // $(list[0]) and $(list[1]) returns child element
  $listElement.children(".top-module"); // $(list[0]) returns child element
  $listElement.children(".content-module"); // $(list[1]) returns child element
</script>

通过.children('selector')中的选择器只会缩小直接子元素的目标范围。在您的情况下，test2不起作用，因为div.content-module > input[id$=elementType]与任何直接子项都不匹配，因为您要定位孙子元素。

Docs here to read。基本上说明.children()和.find()之间的区别。

.children（）方法与.find（）的不同之处在于.children（）仅沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子元素等）。也是

无法选择孙子

2 个答案: