如何找到不包含子字符串的元素

我打算在頁面中找到一個元素，該元素的類不包含特定的名稱。我必須使用DOM定位器和「getElementsByClassName」。例如，我有以下列表：如何找到不包含子字符串的元素

<ol id="selectable"> 
 
    <li class="ui-state-default ui-selectee" name="one">1</li> 
 
    <li class="ui-state-default ui-selectee" name="two">2</li> 
 
    <li class="ui-state-default ui-selectee" name="three">3</li> 
 
    <li class="ui-state-default ui-selectee" name="four">4</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="five">5</li> 
 
    <li class="ui-state-default ui-selectee" name="six">6</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="seven">7</li> 
 
    <li class="ui-state-default ui-selectee" name="eight">8</li> 
 
    <li class="ui-state-default ui-selectee" name="nine">9</li> 
 
    <li class="ui-state-default ui-selectee" name="ten">10</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="eleven">11</li> 
 
    <li class="ui-state-default ui-selectee" name="twelve">12</li> 
 
</ol>

我想找到不包含的元素「UI選擇」。這可以很容易地用CSS的「不是」和\或完成其他方法，但在這裏我必須使用DOM。

謝謝

來源

2017-02-12 Dyptorden

嘗試使用document.querySelectorAll()與:not CSS selector：

// Check your browser's console output for result 
 
console.log(
 
    document.querySelectorAll('#selectable :not(.ui-selected)') 
 
);

<ol id="selectable"> 
 
    <li class="ui-state-default ui-selectee" name="one">1</li> 
 
    <li class="ui-state-default ui-selectee" name="two">2</li> 
 
    <li class="ui-state-default ui-selectee" name="three">3</li> 
 
    <li class="ui-state-default ui-selectee" name="four">4</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="five">5</li> 
 
    <li class="ui-state-default ui-selectee" name="six">6</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="seven">7</li> 
 
    <li class="ui-state-default ui-selectee" name="eight">8</li> 
 
    <li class="ui-state-default ui-selectee" name="nine">9</li> 
 
    <li class="ui-state-default ui-selectee" name="ten">10</li> 
 
    <li class="ui-state-default ui-selectee ui-selected" name="eleven">11</li> 
 
    <li class="ui-state-default ui-selectee" name="twelve">12</li> 
 
</ol>

JSFiddle

來源

2017-02-12 21:11:49

謝謝，這很有效，但由於教學約束，我不允許使用querySelector和querySelectorAll。這就是爲什麼我認爲getElementsByClassName可以用not來調用。任何其他想法？ – Dyptorden

@ user1980253你不能用'document.getElementsByClassName'來完成它，但是你可以用另一種方式來完成，例如 - [JSFiddle]（https://jsfiddle.net/sergdenisov/yn2ej61n/）。 –

@ user1980253對你有幫助嗎？ –

如果您使用的現代瀏覽器（能HTML5的），請使用以下代碼：

var elements = document.getElementById('selectable').querySelectorAll("li:not(.ui-selected)");

否則，使用下面的代碼：

var ol = document.getElementById('selectable').childern, unselectedElements=[]; 
for (var j=0;j<ol.length;j++){ 
    if (!ol[j].getAttribute('class') || 
     !ol[j].getAttribute('class').match(/^ui\-selected/ig)) 
     unselectedElements.push(ol[j]); 
}

來源

2017-02-12 21:34:44 AHBagheri

我也是在瀏覽器的控制檯嘗試這樣做：

Array.from(document.getElementsByClassName("ui-state-default ui-selectee")).filter(function() { return className != "ui-state-default.ui-selectee.ui-selected"});

但結果仍包含的所有元素。它不會刪除那些包含「.ui-selected」的文件。

來源

2017-02-12 23:09:22 Dyptorden

如何找到不包含子字符串的元素

回答

相關問題