Question

我有这样的div结构：

<div id="company1">
  <div class="space m-d p-r s-t">
    <div class="zzr">
      <div class="myTemplate">abc123</div>
    </div>
  </div>
</div>

我想通过“myTemplate” - div“id”获取“company1”类的内容

是否有必要调用选择器中的所有类？因为响应式设计会不好，课程会改变。所以我更愿意称之为“＃company1”，然后直接称为“myTemplate”。试过这个，但内容是空的，也是选择器。

$('#company-'+currentTabIndex).children('.myTemplate').html()
//currentTabIndex has the current Tab-Index, in this case: 1

Answer 1

首先，HTML中的id属性中没有-。其次，children查看直接后代，而您需要使用find()：

$('#company' + currentTabIndex).find('.myTemplate').html()

也就是说，您可以使用单个选择器并完全删除find()：

$('#company' + currentTabIndex + ' .myTemplate').html()

Answer 2

您需要.find，而不是.children：

$('#company-'+currentTabIndex).find('.myTemplate').html()

.find查找后代元素。 .children只是寻找直接的孩子。

使用descendant combinator的单个选择器（下面.myTemplate之前的空格 - 得喜欢这个名字）：

$('#company-' + currentTabIndex + ' .myTemplate').html()

另见Rory's note about the - in your selector, which isn't in your id。从选择器中删除它，或将其添加到id。

Answer 3

儿童只搜索单级子元素，您必须使用find()。

$('#company-'+currentTabIndex).find('.myTemplate').html()

给定一个表示一组DOM元素的jQuery对象， .children（）方法允许我们搜索这些孩子 DOM树中的元素并从中构造一个新的jQuery对象匹配元素。 .children（）方法与.find（）的不同之处在于 .children（）只在DOM树中向下移动一层 .find（）可以遍历多个级别来选择后代元素（孙子等）。

参考：.find() - .children()。

Answer 4

而不是

 $('#company-'+currentTabIndex).children('.myTemplate').html();

尝试

$('#company'+currentTabIndex).find('.myTemplate').html(); //remove '-' from the selector

如上所示，使用.find()代替.children()。

从嵌套div中获取子元素

4 个答案: