JQuery - getting the parent div from a nested element ID

Question

Hi, i am trying to access an element by using an ID of one of it's nested elements, using JQuery. For example : I need to find 'myDiv' from its nested 'searchBox' element. The issue is that the hierarchy changes and the searchBox will not always be in the same nested position. so i essentially need something that says: Give me the DIV that contains the element with the ID of 'searchBox'.(see below) Any suggestions? Thanks!

<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

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

Answer 2

You can use this:

var searchBox = $('#searchBox');

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

The full documentation is available here.

Answer 3

If you know the id, and remembering id's have to be unique, just grab the element like you normally would.

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

There is no benefit from using .parents as the answers above show as it is just slower as it gets all the parents in the hierarchy and filters on them rather than using getElementById. If for instance you knew only the className then you would be best using .closest('div.class') as that steps each parent above one by one until a match is found.

The only time you would use .closest is if you wanted to make sure that searchBox was indeed a parent of your element.

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

Answer 4

If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you'll want this jQuery selector:

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

The closest([selector]) function will find the wrapping element that matches the selector.

Answer 5

You can use

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

or

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