I need to get the id from all the child elements, which are in the parent class = "demo", but if the parent class = "demo" has id = "simone" I don't need to get the child id. How to achieve this?
If is simone, don't get children's id, else get children's 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>You can use the css :not selector and exclude the 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>You can use @jkoch answer or if you need to do something with any div with id 'simone' you can filter it within the forEach callback function. The name variable I set to a blank "" to avoid getting 'result' in the name variable.
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);
});
This should work.
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>