Question

I have select with a conditional sub select, which displays the selected sub select as a div.
However, each div has the same class name, which I can’t change. The div inside each identical div can have a unique id. How do I display the selected content while hiding all other divs? This description probably doesn’t make sense – see jsFiddle here.

<div class="container">
<div id="two" class="phone">Content one</div>
</div>

<div class="container">
<div id="one" class="phone">Content two</div>
</div>

I can hide the content of unselected divs, but not the outer div with class name .container. The div I want to display also has the class name .container.

How to get around this?

Answer 1

Basic DOM: Every element in a DOM tree has a parent node. If you wanted to (say) hide the one node’s parent, then you’d simply do

$('#one').parent().hide();

That’d apply to the div.container which contains the one node. If you have multiple layers of parent nodes you need to traverse, e.g.

<div class="container">
   <div>
      <div>
         <div id="one">...</div>
 etc...

then $('#one').parent('.container') will search back up through all the parent nodes to find a matching node, and accomplish the same thing.