获取 child 个元素的 ID

Question

我需要从 parent class = "demo" 中的所有 child 元素获取 ID，但是如果 parent class = "demo" 有 id = "simone" 我不需要获取 child id。如何实现？

如果是simone，不获取children的id，否则获取children的id？

       var name;
     var divsname = document.querySelectorAll('.demo *');
     divsname.forEach(function(div){
        
        if (div.hasAttribute("id")) {
        name += "Name: "+div.getAttribute("id")+", "; 
        }else{
            
        }
        document.getElementById("get-demo").innerHTML = name;
    console.log(name);
     });

<div id="maja" class="demo"><div id="maja-child"></div></div>
<div id="alex" class="demo"><div id="alex-child"></div></div>
<div id="simone" class="demo"><div id="simone-child"></div></div>
<div id="pit" class="demo"><div id="pit-child"></div></div>

<div id="get-demo"></div>

Answer 1

您可以使用 css :not 选择器并排除 id simone。

       var name;
     var divsname = document.querySelectorAll('.demo:not(#simone) *');
     divsname.forEach(function(div){
        
        if (div.hasAttribute("id")) {
        name += "Name: "+div.getAttribute("id")+", "; 
        }else{
            
        }
        document.getElementById("get-demo").innerHTML = name;
    console.log(name);
     });

<div id="maja" class="demo"><div id="maja-child"></div></div>
<div id="alex" class="demo"><div id="alex-child"></div></div>
<div id="simone" class="demo"><div id="simone-child"></div></div>
<div id="pit" class="demo"><div id="pit-child"></div></div>

<div id="get-demo"></div>

Answer 2

您可以使用@jkoch answer，或者如果您需要对任何具有 id 'simone' 的 div 做一些事情，您可以在 forEach 回调函数中对其进行过滤。 name变量我设置为空白""，避免在name变量中得到'result'.

var name = ""
     var divsname = document.querySelectorAll('.demo');
     divsname.forEach(function(div){
        
        if (div.id !== 'simone') {
        name += "Name: "+div.id+", "; 
        }else{
            //code if you want to do something with simone id
        }
        document.getElementById("get-demo").innerHTML = name;
            console.log(name);
     });

Answer 3

这应该有效。

document.querySelectorAll(".demo").forEach((item) => {
  if (item.id !== "simone") {
    console.log(item.firstChild.id);
  }
});

    <div id="maja" class="demo"><div id="maja-child"></div></div>
    <div id="alex" class="demo"><div id="alex-child"></div></div>
    <div id="simone" class="demo"><div id="simone-child"></div></div>
    <div id="pit" class="demo"><div id="pit-child"></div></div>

    <div id="get-demo"></div>

Answer 4

欢迎使用 Whosebug borma ;)

只需使用 parentElement.getAttribute("id"),

ParentElement() 将返回子元素的父元素，您可以使用 exeption

div.parentElement.getAttribute("id") !== "simone"

将 return false 如果 id 是 simone.

例子

if (div.hasAttribute("id") && div.parentElement.getAttribute("id") !== "simone") {
      name += "Name: "+div.getAttribute("id")+", "; 
}

这个完整的脚本

window.onload = () => 
{
var name = '', divsname = document.querySelectorAll('.demo *');

 divsname.forEach(function(div){
    if (div.hasAttribute("id") && div.parentElement.getAttribute("id") !== "simone") {
      name += "Name: "+div.getAttribute("id")+", "; 
    } 
    document.getElementById("get-demo").innerHTML = name;
 });
}

获取 child 个元素的 ID

Get id of child elements

javascript

foreach

for-loop

get

parent-child