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

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>

- 29er

Answer 1

如果你想找到包含某个元素的 DIV 元素（不考虑该 DIV 的 ID），那么你需要使用以下这个 jQuery 选择器：

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

closest([selector])函数将找到与选择器相匹配的外层包裹元素。

- Jeff Meatball Yang

---

closest([selector])函数将查找与选择器匹配的所有包装元素。不，它只会找到最接近的一个。closest永远不会返回> 1个元素。 - Paolo Bergantino

感谢您的澄清，Paolo - 我对最接近的概念有误，并已编辑了我的答案。 - Jeff Meatball Yang

没关系，我说错了：如果$(selector)返回多个元素（它将返回每个选择器元素的最接近元素），closest函数可以返回>1。 - Paolo Bergantino

非常感谢。这对我来说是最好的解决方案，因为我并不总是知道父DIV的ID会是什么。 - 29er

如果我们有多个div标签，需要找到原始的那一个怎么办？ - Pooya Panahandeh

Answer 2

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

- chaos

---

0 我的错，我可能漏掉了“s”。 - Wayne

Answer 3

如果您知道元素的id，并且记住id必须是唯一的，那么只需像通常一样获取该元素即可。

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

如上所示，使用.parents没有任何好处，因为它会在整个层次结构中获取所有父元素并对其进行过滤，而不是使用getElementById更快地获取。 例如，如果您只知道className，则最好使用.closest('div.class')，因为它会逐个向上遍历每个父级，直到找到匹配项。

只有当您想确保searchBox确实是您的元素的父级时，才会使用.closest。

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

- redsquare

---

再次向John Resig询问了有关标签#id的问题，他说它确实按预期工作。更多调用的原因是因为它还必须检查nodeName，这样你理论上可以做span#myid和div#myid（但不能同时）-我仍然不明白为什么会有这么多调用，但他说没问题，所以我倾向于相信他。 - Paolo Bergantino

但是如果我不知道DIV的ID，只知道子元素呢？ - 29er

你可以使用任何 CSS 选择器，不一定是 ID。例如：.closest('div.someclass') 等。 - redsquare

Answer 4

您可以使用

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

或者

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

- Emre Erkan

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');

完整的文档在此处可用。

- Peter

---

顺便提一下，使用nodeName#id比仅指定id要慢。 - redsquare

@redsquare：实际上并不是这样，jQuery被优化了以原谅这个错误，并且只查找ID。（我亲自向John Resig询问过此事） - Paolo Bergantino

我已经亲自测试过，可以保证它是有效的。等到上班后我会进行演示。 - redsquare

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(".ul-N1 .li-N1").find(".a-N1").text();

- ayed abboushi