在JavaScript中选择儿童，因为我不能使用jQuery

我正在使用jQuery来查找在#mainNavigation div内是否存在具有data-val =“ - 1”属性的li。在jQuery中，这很好，但我需要在JavaScript中做同样的事情。我无法弄清楚的是如何深入研究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>

来源

2013-11-14 ech

您拥有的jQuery方法无论如何都是不正确的。 – BoltClock

可能重复的[如何通过属性选择器w /原生JavaScript无查询选择器]获取元素（http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w- native-javascript-wo-queryselector） – Aguardientico

@Aguardientico：OP不询问如何在没有'querySelectorAll'的情况下做到这一点。 –

您可以使用.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) { 
    // ... 
}

来源

2013-11-14 17:50:30

第三个选项对我有效，谢谢！不是通过使用#mainNavigation使用jQuery选择器的前两个选项吗？ – ech

@ech：不，他们正在使用Selectors API选择器。这是原生JavaScript代码，而不是jQuery。这是jQuery在底层使用的。 –

在JavaScript中选择儿童，因为我不能使用jQuery

回答

相关问题