選擇包含特定元素的元素

Question

我有一些嵌套元素，而我的HTML結構沒有任何紀律。 此外，沒有任何用於選擇元素的類名或ID。 因此，我僅有的線索是包含特定元素。

注意：應該注意，我的HTML代碼是動態的。 我的意思是，它們的結構一直都不相同。 有時他們是這樣的：

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

有時其他情況是這樣的：

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

有時其他情況是這樣的：

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

等等 ..！ 好了，如您所見，我不能使用以下任何一項：

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

因為正如我所說，HTML代碼不是恆定的。 現在我想知道，如何選擇包含<h5> <div> <h5> ？ 所以我想要上面三個示例的輸出：

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

好吧，我該怎么做？

Answer 1

您可以像這樣用h5選擇標題。

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

Answer 2

:has(selector) .has()或.filter()會為您提供div：

使用: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> 

使用.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> 

使用.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

像這樣的事情呢：

 $('div h5').parent()

我不確定parent（）函數，但是應該有類似的可用內容...。

Answer 4

您可以使用parent（）選擇器獲取div：

僅檢查包含h5元素的div：
如果<h5>元素的直接父級不是“ div”，則選擇器不會選擇父級：

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

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

或者，如果您想獲取div元素的父級（非直接），則可以使用：

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

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

如果您想獲得父母（如果父母不是div），則可以使用：

$("h5").parent();

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

您在這里有官方的JQuery文檔=> https://api.jquery.com/parent/