在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

回答

相關問題