根據條件替換未知命名元素的inner.html

Question

我經常遇到這個問題，卻從來不知道最好的方法。 想象一下，我有一個結構，其中包含以下html的多個實例：

<div class="known">
    <div class="another unknown">
        <div class="unknown">
            <h4>Something a something</H4>
        </div>
    </div>
</div>

對於已知的每個div類，我只想更改該div的內部html，前提是該div的內部html中包含帶有特定標記的div，在這種情況下為<h4> 。

實現此目標的最佳方法是什么。 我知道我可以通過采用已知類的內部html並進行正則表達式匹配來做到這一點。 但是，是否有基於標簽的更可靠的方法？

Answer 1

很簡單，只需使用跨越div.known的選擇器並將其上下文限制為div h4 。 如果選擇器至少選擇一個元素，則div.class具有您期望的子級。

if( $('.known div h4').length > 0 ){
    $('.known').html('Some html');
}

Answer 2

是! 你可以這樣做。

var head = Array.prototype.slice.call(document.querySelectorAll("h4 #known"));
for(var i = 0; i < head.length; i++)
{
    while(head[i].className !== "known")
        head[i] = head[i].parent();
}

現在head將是所有DOM元素的數組，這些元素具有known的標簽，並在其中包含h4 。

Answer 3

使用jQuery，您可以使用.has（）來縮小選擇范圍，甚至鏈接其他方法，如下所示：

$(".known").has("h4").css("background","red");

例如查看這個小提琴 。 請注意，僅當該元素包含作為后代的h4標記時，單擊按鈕才會更改任何已知的div。的顏色。

在jQuery的。先后（）文檔- https://api.jquery.com/has/