在dom中向上移动时找到孩子

Question

这听起来有点令人困惑，但在这里 我想要的是在用户点击课程目标时找到孩子（OF CLASS PARENT） 重要：我不知道儿童班和html结构中的子。在第一种情况下，目标类可以在'blah'之后，或者在第二种情况下可以直接在儿童之后。

可用信息：类“PARENt”和$（this）[class target]
查找： PARENT班的孩子（ID）（你不能使用班级 .children ）

<div class="parent">
<div class="children" id="1">
   <div class="blah">
      <div class="target">TARGET</div>
   </div>
</div>
<div class="children" id="2">
   <div class="target">TARGET</div>
</div>
<div class="children" id="3">
   <div class="blah">
      <div class="target">TARGET</div>
   </div>
</div>

实施例

单击目标1将产生：ID = 1

单击目标2将产生：ID = 2

单击目标3将产生：ID = 3

Answer 1

如果您只想找到一个ID：

$('.target').click(function() {
  var found = false;
  var parent;
  var previous;
  while(!found) {
    if (previous) {
      parent = previous.parent();
    } else {
      parent = $(this).parent();
    }

    if (parent.hasClass('parent')) {
      found = previous;
    }
    previous = parent;
  }

  console.log(found.attr('id'));
});

Demo.

Answer 2

直接回答你的问题：

$(".parent *")会为您提供所有 .parent的孩子，无论多少层深

实际上回答你的问题：

限制可能的元素，类别，ID等。

$(".parent div, .parent span, .parent .child ...etc")

您还可以使用> CSS选择器仅抓取元素或元素集的直接子元素：

例如，

$(".parent > *")将为您提供.parent

的所有直系子女

在您的问题的背景下

$(".target").on("click", function () {
  $(this).closest(".parent").children();
  // OR
  $(this).closest(".parent").find("*");
});

获取特定ID

鉴于您当前的DOM结构...

$(".target").on("click", function () {
  var id = $(this).closest("[id]").attr("id");
  console.log(id);
});

Answer 3

使用.parentsUntil()获取所有父母的集合（但不包括）.parent。然后获取此元素的最后一个元素以获取父元素的子元素。

$(".target").click(function() {
  var child = $(this).parentsUntil(".parent").last();
  console.log(child.attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
  <div class="children" id="1">
    <div class="blah">
      <div class="target">TARGET</div>
    </div>
  </div>
  <div class="children" id="2">
    <div class="target">TARGET</div>
  </div>
  <div class="children" id="3">
    <div class="blah">
      <div class="target">TARGET</div>
    </div>
  </div>
</div>

另一个