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

时间:2017-02-12 21:07:38

标签: javascript html dom

我打算在页面中找到一个不包含特定名称的元素。我必须使用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-selected”的元素。这可以通过CSS的“非”和/或其他方法轻松完成,但在这里我必须使用DOM。

谢谢

3 个答案:

答案 0 :(得分:2)

尝试将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

答案 1 :(得分:0)

如果您使用的是现代浏览器(支持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]);
}

答案 2 :(得分:0)

我也在浏览器的控制台中试过这个:

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

但结果仍然包含所有元素。它不会删除包含“.ui-selected”

的那些