Hide DIV blocks outside of a specified DIV container

[DssTrainer]

I have this code

<div id="parentA">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

<div id="parentB">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

I'd like to make a javascript that hides the child1 and child2 inside the "ParentB" parent div, but doesn't hide them in the "ParentA" div.

is this possible?

 

[trollacious]

IDs must be unique.

Lee

 

[DssTrainer]

I am aware of that. Which is why I need javascript to hide one of them. Like maybe if (!childOf.Container("ParentA")) then hide

 

[trollacious]

If you're aware they need to be unique, why do you have duplicate IDs? Make the IDs unique and you can accomplish what you described easily. Otherwise you'll have to hide the entire <div> to hide the containers inside.

Lee

 

[Ascalonian]

If you are aware of that, why not do it then?

<div id="parentA">
  <div id="[b]parentAchild1[/b]"></div>
  <div id="[b]parentAchild2[/b]"></div>
</div>

<div id="parentB">
  <div id="[b]parentBchild1[/b]"></div>
  <div id="[b]parentBchild2[/b]"></div>
</div>

That is what trollacious means. Then you can do:

document.getElementById("parentBchild2").style.display="none";

to hide it.

 

[DssTrainer]

That would be fine if that's what I was asking. But I wasn't asking for that. I can't change the id's because depending on whether or not they are loaded in the first parent, that will be independent of another function that loads the same children to another parent. Thats why when it's all said and done, I want javascript to run through it and clean up any duplicates from view.

Regardless, it is probably not the best way to do it, as the w3c validation would still probably fail as javascript is only a mirage. So instead of "id" I could probably do it with the "class" value.

But the question still applies. How can I ensure that div's with the same class can be hidden from all other divs except for the ParentA

 

[dwarfthrower]

Use a for loop and step through the parent element's children.

Or am I missing something so blindingly simple here that the standard "for each child of parent, if child meets X, Y or Z criteria then do stuff to it" routine won't work?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[j4606]

why not hide div 2? or get its elements.

var parentA = document.getElementById("parentA").getElementsByTagName("div");
var parentB = document.getElementById("parentB").getElementsByTagName("div");

for (var x = 0; i<parentA.length; i++){
for (var y = 0; i<parentb.length; i++){
if(parentA[x].id == parentb.length){
parentb.style.display="none;
}
}
}

i just type all that so syntax is wrong but u get the idea.

 

[j4606]

parentA[x].id == parentb.id

 

[DssTrainer]

ah.. that might be what i'm after.. tho i might do it with class instead of id.. Thanks! I'll give that a try and let you know.