Question

我试图使用JQuery使用其中一个嵌套元素的ID来访问元素。例如：我需要从嵌套的'searchBox'元素中找到'myDiv'。问题是层次结构发生了变化，而searchBox并不总是处于相同的嵌套位置。所以我基本上需要一些东西：给我包含ID为'searchBox'的元素的DIV。（见下文）有什么建议吗？谢谢！

<div id="myDiv" class="CommonGridView_ListBoxPopupPanel"> 
Some text here : 
<table><tbody><tr><td><input class="tboxw" type="text" id="btnFind"/></td>  
 <td>some content</td> </tr> 
 <tr> <td><textarea id="searchBox">text area content</textarea> </td> 
 </tr> 
 </tbody> 
</table> 
<table><tr><td></td></tr></table>
</div>

Answer 1

如果你想找到包装DIV元素（不管那个DIV上的ID），你会想要这个jQuery选择器：

$("#searchBox").closest("div");

c losest([selector]) function将找到与选择器匹配的包装元素。

Answer 2

$('#searchBox').parents('#myDiv')

Answer 3

如果你知道id，并且记住id必须是唯一的，那就抓住元素吧像往常一样。

var $parentDiv = $('#searchBox');

使用.parents作为上面的答案没有任何好处，因为它只是较慢，因为它获取层次结构中的所有父级并过滤它们而不是使用getElementById。例如，如果您只知道className，那么您最好使用.closest('div.class')，因为它会逐个逐步执行每个父级，直到找到匹配项。

你唯一一次使用.closest就是你想确保searchBox确实是你元素的父元素。

if ( $element.closest('#searchBox').length ){
     //do something
}

Answer 4

您可以使用

$('#searchBox').parents('div:first')

或

$('#searchBox').parents('div:eq(0)')

Answer 5

您可以使用：

var searchBox = $('#searchBox');

// Have the searchBox jQuery object, so find the ancestors that match a specific selector.
var parentDiv = searchBox.parents('div#myDiv');

完整文档为available here。

Answer 6

复杂的嵌套示例：

点击a-N2？!!

找到a-N1的文本值

解决方案：

 <ul class="ul-N1">
        <li class="li-N1">
            <a class="a-N1"></a>
            <ul class="ul-N2">
                <li class="li-N2">
                    <a class="a-N2"> </a>
                </li>
            </ul>
        </li>
    </ul>

Jquery的：

var a-N1 = $（this）.closest（＆＃34; .ul-N1 .li-N1＆＃34;）。find（＆＃34; .a-N1＆＃34;）。text（） ;

JQuery - 从嵌套元素ID获取父div

6 个答案: