Question

所以，我是JavaScript的新手，我一直在这里和其他地方阅读和搜索它。

这可能非常容易，但是我被卡住了，我也不知道如何完成它。

这是交易。我正在尝试通过孩子的id / class / tag获得父母的名字。我会示范。

<li class="example">example</li>
  <ul id="what i want">what i want</ul>
    <li id="something here">something here</li>
      <img class="element i'm using">element im using</img>

因此，我可以通过document.getElementById获得“我正在使用的元素”。我想得到“我想要的”。我不能真正使用同一件事，因为该元素具有一些我无法预测的随机数。

我的计划是使用“我正在使用的元素”获取“我想要的”并应用规则。

对不起，我只是个字面上的初学者，对不起，但是我还没有找到解决方法。

我希望你们能帮助我。

谢谢，祝你有美好的一天。

---编辑/更新---

嘿，我快速更新。

我找到了一种做自己想要的方法的方法。我会解释得更好，但是我又在挣扎。

我们在这里：

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

因此，我最初的问题是我试图通过<ul id="random-number-1">获得<img class="100-photo">。我已经做到了。我使用了一个函数来返回document.querySelector("100-photo")的父级<li class="voice">，并使用.parent来运行我想要的节点，然后返回了<ul id="random-number-1">以便可以设置财产。它工作正常，但我发现了另一个问题：此解决方案仅返回节点树上包含<ul>的第一个<img class="100-photo">，但实际上<li class="bp-body">可能还有其他{{ 1}}。

这是我使用的功能：

<ul id="random-number-xxxx">

元素function findParent() { return document.querySelector("100-photo").parentNode; } findParent().parentNode.style.setProperty('background', '#fff');具有很好的白色背景，但是其他具有相同<ul id="random-number-1">的元素保持不变。我试图找到一种解决方法。

我首先尝试使用querySelectorAll来查找所有元素，然后使用console.log查看其是否有效。

<img class="100-photo">

它在控制台中返回： function getParents() { return document.querySelectorAll("100-photo"); }

太好了，这是一个开始。但是当我尝试做同样的把戏时，那没用。

NodeList [ img.100-photo , img.100-photo ]

控制台仅显示：function getParents() { return document.querySelectorAll("100-photo").parentNode; }。

我认为通过循环可以解决该问题，但是我还不熟悉它。我尝试解决一些问题，至少获得了一个包含undefined的{{1}}的NodeList，但是我什么都没得到。

我的目标是确定每个<li class="voice">以获得各自的<img class="100-photo">父对象，以获取<img class="100-photo">来设置属性。

我希望你们能帮助我。

谢谢，祝你愉快。

Answer 1

UPDATE ：

根据您最新的代码更新，以下内容应适用。

替换此代码

function findParent（）{返回 document.querySelector（“ 100-photo”）。parentNode; } findParent（）。parentNode.style.setProperty（'background'，'#fff'）;

使用以下代码

var elements = document.getElementsByClassName("100-photo")
Array.prototype.forEach.call(elements, function(item) { 
	item.parentNode.parentNode.style.setProperty('background', '#00aae4'); 
});

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

================================================ =========================

如果您知道子元素ID并想访问父元素，则可以使用以下内容：

document.getElementById("child_id").parentElement

parentElement的文档

以下示例：

运行代码段时，您会在下面的控制台中看到父div。

var parent = document.getElementById("child").parentElement
console.log(parent)

<div id="parent">
  <div id="child">I m a child of parent div </div>
</div>

Answer 2

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

children属性返回一个元素数组，如下所示：

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

如果需要，可以使用querySelector的替代方法，例如document.getElementsByClassName（'parent'）[0]。

您可以只使用querySelectorAll来获取具有child1类名称的parent的后代：

children = document.querySelectorAll('.parent .child1');

qS和qSA的区别在于，后者返回匹配选择器的所有元素，而前者仅返回第一个此类选择器。

Answer 3

更新2

根据您的要求，下面的代码即可完成这项工作。

function findParent(element) { 
  return element.parentNode;
}

var childrens = document.getElementsByClassName("100-photo");

Array.prototype.forEach.call(childrens, child => {
  findParent(child).parentNode.style.setProperty('background', 'yellow');
});

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

alert(document.getElementById('element_use').closest('#element_want').id);

<li class="example">example</li>
    <ul id="element_want">what i want <!-- removed <ul> from here  -->
        <li id="something here"> <!-- removed <li> from here  -->
            Something here
            <img class="element_use" id="element_use">element im using</img>
        </li>
    </ul>
</li>

您可以使用最近的来查找所需的父元素

document.getElementById("element_u _use").closest('.parent_u_need_class');

更新后的答案 我根据您的HTML缩进进行了回答，根据您的缩进进行了一些更改。

最近的函数查找在参数中传递了匹配值的父母 https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

有没有办法使用JavaScript获取孩子的父母姓名？

3 个答案: