Select element which contains a specific element

Question

I have some nested elements and my HTML structure doesn't has any discipline. Also there is not any classname or id for selecting element considered. So, the only clue that I have is containing specific element.

Note: It should be noted, my HTML codes are dynamic. I mean is their structure is not identical all the time. Sometimes they are like this:

<div> <h1> <span> anything </span> </h1> <h5> anything> </h5> </div>

And sometimes else they are like this:

<div> anything </div> <div> <h2> anything </h2> <h5> anything> </h5> </div>

And sometimes else they are like this:

<div> <span> anything </span> </div> <div> <h5> anything> <h2> anything </h2> </h5> </div>

And so on ..! Well, As you see, I can not use none of these:

• $(elmnt).closest("tag");
• $(elmnt).siblings("tag");

Because as I said, the HTML code is not constant. Now I want to know, How can I select that <div> which is containing <h5> ? So I want this output for three examples above:

<div> <h1> <span> anything </span> </h1> <h5> anything> </h5> </div>

<div> <h2> anything </h2> <h5> anything> </h5> </div>

<div> <h5> anything> <h2> anything </h2> </h5> </div>

Well, how can I do that?

Answer 1

您可以像这样用h5选择标题。

jQuery("div > h5").parent()

Answer 2

:has(selector) , .has() or .filter() would give you that div:

using :has() :

$('div:has(> h5)')

 $('div:has(> h5)').css('background', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1> <span> anything </span> </h1> <h5> anything </h5> </div> 

using .has() :

$('div').has('> h5)')

 $('div').has('> h5').css('background', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1> <span> anything </span> </h1> <h5> anything </h5> </div> 

using .filter() :

$('div').filter(function(){
    return $(this).children('h5').length !== 0 
});

 $('div').filter(function(){ return $(this).children('h5').length !== 0 }).css('background', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1> <span> anything </span> </h1> <h5> anything </h5> </div> 

Answer 3

What about something like this:

 $('div h5').parent()

I'm not sure about the parent() function, but there should be something similar available....

Answer 4

You can get the div, with the parent() selector:

Check only the div, with containt a h5 element :
If the direct parent of the <h5> element isn't a "div", the selector doesn't select the parent:

 $("div > h5").parent();

<div><h5>Something</h5></div>

Or if you want to get the parent (not direct) of the div element, you can use :

$("h5").parent("div");

<!-- In this case: the selected parent element is the <div></div> -->
<div><p><h5>Something</h5></p></div>

If you want to get the parent (if the parent is not a div) you can just use :

$("h5").parent();

<!-- In this case: the parent element is the <p></p> -->
<div><p><h5>Something</h5></p></div>

you have the official JQuery documentation here => https://api.jquery.com/parent/