在JavaScript中選擇子級，因為我無法使用jQuery

Question

我正在使用jQuery找出#mainNavigation div中是否存在帶有data-val =“-1”屬性的li。 在jQuery中，這很好用，但是我需要在JavaScript中做同樣的事情。 我不知道的是如何使用jQuery中的選擇器來深入了解它的完成方式。

if($('#mainNavigation ul li ul li[data-val="-1"]')){
   $("#mainNavigation").css("padding-left" , "10px");
};

<div id="mainNavigation">
    <ul>
        <li>
            <ul>
                <li data-val="-1">Title</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

您可以使用.querySelector() ：

if (document.querySelector('#mainNavigation ul li ul li[data-val="-1"]')){
   // ...
}

---

或者，如果您不需要對級別如此具體，則可以這樣做：

if (document.querySelector('#mainNavigation li[data-val="-1"]')){
   // ...
}

---

或不使用querySelector ：

var lis = document.getElementById('mainNavigation').getElementsByTagName("li");
var found = false;
for (var i = 0; i < lis.length; i++) {
    if (lis[i].getAttribute("data-val") === "-1") {
        found = true;
        break;
    }
}

if (found) {
    // ...
}