Question

我正在尝试访问嵌套的id，但也在许多区域中重复。类似于以下示例标记的内容：

<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>

我尝试使用

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

但这不起作用。但这确实有效：

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

有人可以解释如何使用文本'up 1'专门隐藏p标签吗？

小提琴：http://jsfiddle.net/6UBwD/

感谢所有帮助

编辑：将id更改为类，但仍然没有骰子。我究竟做错了什么？ FIDDLE：http://jsfiddle.net/6UBwD/4/

Answer 1

简短的回答是，<td>内不应有<ul>个元素。 See this for more information

This will work

我将td替换为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>

但是，正如其他人所指出的那样，这有效但不可靠。您不能在同一文档中使用相同id的多个元素。您应该使用class代替id。然后你可以做

$('#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

Answer 2

ID应该是HTML文档中的唯一ID。请改用类。请参阅：http://www.w3schools.com/tags/att_global_id.asp

Answer 3

首先，这不是有效的html，according to the HTML 5 specification，其中ID必须在文档中是唯一的。

要回答您的问题，您可以通过将它们与简单空格jQuery('#mySelectorId1 #mySelectorId2')分开来创建“嵌套”JQuery选择器。

Answer 4

如评论中所述，您不应该有重复的ID。

一个选项是为每个<p>提供一个唯一ID并隐藏您要隐藏的特定ID

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

使用Jquery访问嵌套的HTML标记

4 个答案:

jsFiddle example