在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) {
    // ...
}