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

我打算在页面中找到一个元素，该元素的类不包含特定的名称。我必须使用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

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

回答

相关问题