主页 / 问题 / 991189
Accepted
Air
Asked:2020-06-10 15:13:34 +0000 UTC2020-06-10 15:13:34 +0000 UTC

如何找出元素是同一父级的子级？

  • 772

同事，有两个block同一个class，其中有两个block同一个class

[...document.querySelectorAll('.child')].forEach(s => {
  console.log("s", s);
});
<div class="parent">
  <div class="child">Child-1</div>
  <div class="child">Child-2</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

如何找出什么

<div class="child">Child-3</div> <div class="child">Child-4</div>

一个父母的后代？

PS我想指出一件重要的事情，您不应该手动为他们分配不同的类或通过ID确定。因为为此我想知道，为了以编程方式为每个 parent 分配不同的类，有超过 500 个类，手动不是一个选项....

还有一瞬间。可以有两个以上甚至一个子元素...

为了更清楚，我将澄清这个问题......

有一堆元素.parent，其中第N个元素.child。

嗬它可能是

<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>
<div class="parent">
  <div class="some-other-class">Some other class</div>
  <div class="some-other-class">Some other class</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

当有一个元素.parent没有子元素.child时，不要计算它们......

javascript

2 个回答

  1. 我想象这样的事情

    function commonParent(firstElemSelector, secondElemSelector) {
    var first = document.querySelector(firstElemSelector);
    var second = document.querySelector(secondElemSelector);

    return first.parentElement === second.parentElement;
}

console.log(commonParent('.firstElem', '.secondElem'));

    ps根据下面有经验的同志的建议更正了

    • 1
  2. Best Answer

    也许是这样的：

    [...document.querySelectorAll('.parent')].forEach( (elem, index) => { 
  [...elem.querySelectorAll('.child')].forEach(chld => {
    console.log( 'Потомок parent номер ' + index + ' — ',
                  chld,
                 '\n// Всего таких: ' + elem.querySelectorAll('.child').length + ' шт' );
  });
});
    <div class="parent">
  <div class="child">Child-0</div>
  <div class="child">Child-1</div>
</div>
<div class="parent">
  <div class="some-other-class">Some other class</div>
  <div class="some-other-class">Some other class</div>
</div>
<div class="parent">
  <div class="child">Child-2</div>
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

    • 1

相关问题