轉換的jQuery JavaScript代碼

Question

要找到一個DOM元素和遍歷並觸發click事件，我想：

$("#intrusionGroup1").closest("div").children("div").children("ul").children("li").children("div").children("a").click(function() { 
       self.addIntrusion(); 

      }); 

我需要將其轉換爲Javascript代碼基礎，但是這並不工作：

document.queryselector("#intrusionGroup1").closest("div").children(....) 

它說children不是一個功能，即使find是不是一個函數。

如何將其轉換爲純Javascript代碼？

Answer 1

也有一些是錯誤fundanmentally在你的HTML結構，如果你要使用

$("#intrusionGroup1").closest("div").children("div").children("ul").children("li").children("div").children("a") 

選擇。用CSS類的要在其上單擊的元素更好的使用嘗試（例如：一類=「列表項鍊接」），然後將所有你需要做的是：

$(".list-item-link").click(function() { 
    $(this).addIntrusion(); 
}); 

Answer 2

我需要將其轉換爲Javascript代碼的基礎，但這並沒有工作..

document.queryselector("#intrusionGroup1").closest("div").children(....) 

應該說queryselector不是一個功能，因爲它需要資本S。如果您使用的是querySelector，則他們的下一個錯誤是closest不是函數，因爲DOM沒有closest方法。

您需要定義您自己的工作人員功能，該功能可使用parentNode來處理「最接近」的部分。例如，一些依稀像：

function closest(element, tagName) { 
    while (element && element.tagName !== tagName) { 
     element = element.parentNode; 
    } 
    return element; 
} 

與jQuery的closest，只有做了標記名稱檢查，而不是一個CSS選擇器檢查（見element.matches如果你需要一個完整的CSS選擇器檢查）。

children是元素上的有效DOM屬性。

，那麼你就必須：

var children = closest(document.queryQelector("#intrusionGroup1", "div").children; 

但因爲你有一個ID，你可能看getElementById代替：

var children = closest(document.getElementById("intrusionGroup1", "div").children; 

注意children是DOM中的屬性，而不是一個函數。

然後，你需要處理循環通過每個級別的孩子，併除掉你不想要的。但肯定有一個更簡單的方法來做到這一點。舉例來說，如果你把一個id在div你與closest（比如說，intrusionGroupDiv1）查找，然後就變成：

var matches = document.querySelectorAll("#intrusionGroupDiv1 > div > ul > li > div > a");