时间戳

首页 > 解决方案 > 有没有办法使用 JavaScript 获取孩子的父母姓名？

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

问题描述

所以，我真的是 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">on 节点树的第一个，但实际上<li class="bp-body">可能有 others <ul id="random-number-xxxx">。

这是我使用的功能：

function findParent() { 
 return document.querySelector("100-photo").parentNode;
}
findParent().parentNode.style.setProperty('background', '#fff');

该元素<ul id="random-number-1">有一个漂亮的白色背景，但其他相同的元素<img class="100-photo">保持不变。我试图找到一种解决方法。

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

function getParents() {
 return document.querySelectorAll("100-photo");
}

它在控制台中返回： NodeList [ img.100-photo , img.100-photo ]

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

function getParents() {
 return document.querySelectorAll("100-photo").parentNode;
}

控制台仅显示：undefined。

我认为使用循环它可能适用于解决方案，但我还不熟悉它。我试图解决一些问题，至少得到一个<li class="voice">包含的NodeList，<img class="100-photo">但我什么也没得到。

我的目标是确定每个<img class="100-photo">让各自的<li>父母获得<ul id="random-number-xxxx">设置属性。

我希望你们能帮助我。

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

标签： javascript

解决方案

更新：

根据您最新的代码更新，以下应该可以工作。

替换此代码

function findParent() { return 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>

推荐阅读