Use Jquery to access nested HTML tags

Question

I am trying to access an id that is nested, but is also duplicated in a number of areas. Something similar to the following sample markup:

<td id='one'>
    <p id='up'>up 1</p>
    <p id='down'>down 1</p>
</td>
<td id='two'>
    <p id='up'>up 2</p>
    <p id='down'>down 2</p>
</td>

I tried using

$('#three').click(function(){
    $('td#one p#up').hide();
});

but that doesn't work. But this does work:

$('#four').click(function(){
    $('p#up').hide();
});

Can someone explain how to hide specifically the p tag with the text 'up 1'?

Fiddle: http://jsfiddle.net/6UBwD/

All help is appreciated

EDIT: Changed id's to classes, and still no dice. What am I doing wrong? FIDDLE: http://jsfiddle.net/6UBwD/4/

See my answer for why the jsfiddle still doesn't work stackoverflow.com/a/24874901/3371119 — soktinpk
– soktinpk, Commented Jul 21, 2014 at 21:28

Dan · Accepted Answer · 2014-07-21 21:31:06Z

The short answer is that you shouldn't have <td> elements inside <ul>. See this for more information.

This will work

I replaced td with div

<ul>
    <div id='one'>
        <p id='up'>up 1</p>
        <p id='down'>down 1</p>
    </div>
    <div id='two'>
        <p id='up'>up 2</p>
        <p id='down'>down 2</p>
    </div>
        <div>
        <button id='three'>click here - doesnt work</button>
    </div>
        <div>
        <button id='four'>click here -- works</button>
    </div>
</ul>

However, as other's have pointed out, this works but isn't reliable. You cannot have multiple elements with the same id in the same document. You should use class instead of id. You can then do

$('#three').click(function(){
    $('#one p.up').hide();
});

$('#four').click(function(){
    $('p.up').hide();
});

HTML:

<ul>
    <div id='one'>
        <p class='up'>up 1</p> <!-- Notice class="up" instead of id="up" -->
        <!-- Alternatively, you could do "up1", "up2", so on as ids -->
        <p class='down'>down 1</p>
    </div>
    <div id='two'>
        <p class='up'>up 2</p>
        <p class='down'>down 2</p>
    </div>
        <div>
        <button id='three'>click here - doesnt work</button>
    </div>
        <div>
        <button id='four'>click here -- works</button>
    </div>
</ul>

Working jsFiddle

Ivan Sivak · Accepted Answer · 2014-07-21 21:09:03Z

1

ID should be an unique within the HTML document. Use class instead. See this: http://www.w3schools.com/tags/att_global_id.asp

answered Jul 21, 2014 at 21:09

Ivan Sivak

7,5484 gold badges39 silver badges43 bronze badges

Comments

thele101 · Accepted Answer · 2014-07-21 21:40:45Z

1

First of all, this is not valid html, according to the HTML 5 specification which says ID must be unique within a document.

To answer your question, you can create "nested" JQuery selectors by separating them with a simple space ie jQuery('#mySelectorId1 #mySelectorId2').

edited Jul 21, 2014 at 21:40

answered Jul 21, 2014 at 21:11

thele101

2413 silver badges4 bronze badges

Comments

Dan · Accepted Answer · 2014-07-21 21:12:20Z

0

As noted in the comments you shouldn't have duplicate ids.

One option is to give each <p> a unique id and hide the specific one that you want to hide

$('#three').click(function(){
    $('#up1').hide();
});

jsFiddle example

answered Jul 21, 2014 at 21:12

Dan

9,4885 gold badges44 silver badges76 bronze badges

2 Comments

YazanLpizra Over a year ago

Is it possible to reuse classes rather than use unique id's? My actual html file is somewhat complicated but is set up in a similar fashion to the sample code above. Could you check out my edit please?

Dan Over a year ago

look at @soktinpk answer, i think he's got the answer if you want to keep classes

Collectives™ on Stack Overflow

Use Jquery to access nested HTML tags

4 Answers 4

Comments

Comments

Comments

jsFiddle example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related