如何根據類查找子元素的父級 - Jquery

我已閱讀過類似的問題，但我仍然是Jquery的新手，並且無法理解解決方案，並且非常感謝一個確切的示例。如何根據類查找子元素的父級 - Jquery

這裏就是我想要做的事：

<div class="parent"> 
    <span class="random"> 
     <span class="child">

我要改變「孩子」只有當孩子擁有一個家長（不直接父），它的類是「父」的.innerHtml內容。

我確實知道「孩子」類將存在，但我不知道頁面上是否存在「父」類。

可能有多個「子」類元素，可能是多個「父」類元素。如果任何「孩子」孩子擁有「父母」，他們都需要採取行動。

嵌套子跨度是由另一個庫創建的，所以我沒有權限給他們ID或任何東西。

我想到一個問題是這樣的，但很明顯，這個代碼是不正確的：

var children = document.getElementsByClass('child'); 

foreach(children as child){ 
    if (child.hasParent(.parent)){ 
     child.innerHTML = "New Text"; 
}

什麼是正確的方式做到這一點，並
如何防止出現問題，如果有在頁面中沒有「父」元素？

來源

2015-09-25 dwlorimer

你注意了這個jQuery，你想要一個jQuery的答案或香草JavaScript的答案？ – Jamiec

我會帶。我可能更喜歡jQuery - 無論哪個更容易和最合適。我已經在頁面上使用jQuery。 – dwlorimer

jQuery仍然很流行，但它作爲DOM規範化程序/簡化程序/自動迭代程序的角色已經開始變得完全冗餘。另外，將動畫升級到requestAnimationFrame的原因對於我來說是一種令人咋舌的用戶。即使我故意不將它添加到新的應用程序中，我仍然偶爾會錯過它。但是值得學習核心DOM東西和querySelectorAll API，即使您通常會使用JQ。 –

您可以使用document.querySelectorAll()發現有類「父」父帶班「的孩子」的所有元素：匹配

var children = document.querySelectorAll(".parent .child");

這讓你回來的節點列表，可能是一個空清單：

for (var i = 0; i < children.length; ++i) 
    children[i].innerHTML = "New Text";

的.querySelector()和querySelectorAll()方法的工作（主要是），即使在IE8，所以這種做法是相當普遍的。

既然你標記與jQuery的問題，您可以與該庫也做到這一點：

$(".parent .child").html("New Text");

這將更新所有與「父」父節點「子」元素; jQuery爲你做了所有的迭代。

來源

2015-09-25 12:50:28 Pointy

這很完美！它效果很好。謝謝 - 我知道必須有一個簡單的方法來做到這一點。 – dwlorimer

在jQuery中

$(".parent .child").html("New Text");

這將改變任何.child元素的HTML內容，但只有當他們有一個家長.parent - 不只是直接的父。在香草JS

來源

2015-09-25 12:54:29 Jamiec

感謝您的具體jQuery答案。這比我想要做的要容易得多。 – dwlorimer

更短的代碼：

var children = document.querySelectorAll(".parent .child"); 
[].forEach.call(children, function(elem){ 
    elem..innerHTML = "New Text"; 
});

來源

2015-09-25 13:00:53

如果你真的不想插入文本時.parent是直接父。這是JQ可能仍然在querySelector上有一些操作的一種操作，雖然可能性很好，但可能有一些css querySelector支持我忘記了。

$('.parent .child').not('.parent > .child').html('stuff');

如果你需要確定任何非直接.parent父節點，你可以這樣做：

$('.child').parent().parents('.parent'); 
//or ... '.parent:first'); just for the first one it finds.

哦，還有一兩件事，可能有助於性能公平一點是添加HTML標籤如果可以依賴的話，比如說

$('div.parent p.child');

我覺得還是JQ使用舊的DOM東西引擎蓋下的性能和尋找標記名稱的東西會首先下來的不僅僅是通過在場景類更快。

來源

2015-09-25 13:17:24

如何根據類查找子元素的父級 - Jquery

回答

相關問題