Как найти элемент, который класс не содержит подстроки

Я намереваюсь найти элемент на странице, у кого класс не содержит определенного имени. Я должен использовать 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>

Я хочу, чтобы найти элементы, которые не содержат «щ выбранные» .Это может быть легко сделано с 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 можно вызвать с помощью нет. Любые другие идеи? – 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

Как найти элемент, который класс не содержит подстроки

ответ

Смежные вопросы