So finden Sie ein Element, dessen Klasse keine Teilzeichenfolge enthält

Ich beabsichtige, ein Element in einer Seite zu finden, dessen Klasse keinen bestimmten Namen enthält. Ich muss DOM-Locator und "getElementsByClassName" verwenden. Zum Beispiel habe ich die folgende Liste:So finden Sie ein Element, dessen Klasse keine Teilzeichenfolge enthält

<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>

Ich mag die Elemente finden, die nicht enthalten „ui-selected“ .Dieses kann leicht mit CSS ist „nicht“ und \ getan werden, oder andere Methoden, aber hier muss ich DOM verwenden.

Danke

Quelle

2017-02-12 Dyptorden

Try document.querySelectorAll() mit :not CSS selector zu verwenden:

// 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

Quelle

2017-02-12 21:11:49

Danke, das funktioniert sehr gut, aber aufgrund einer didaktischen Einschränkung darf ich nicht querySelector und querySelectorAll verwenden. Deshalb vermutete ich, dass getElementsByClassName mit einem nicht aufgerufen werden könnte. Irgendwelche anderen Ideen? – Dyptorden

@ user1980253 Sie können es nicht mit 'document.getElementsByClassName' tun, aber Sie könnten es anders machen, zum Beispiel - [JSFiddle] (https://jsfiddle.net/sergdenisov/yn2ej61n/). –

@ user1980253 hat es dir geholfen? –

Wenn Sie modernen Browsern (Capable von HTML5) verwenden, verwenden Sie die folgende Code:

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

Andernfalls verwenden Sie folgenden Code:

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]); 
}

Quelle

2017-02-12 21:34:44 AHBagheri

ich dies auch in Browser-Konsole versucht:

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

aber das Ergebnis immer noch alle Elemente enthält. Es werden nicht diejenigen entfernt, die ".ui-selected" enthalten

Quelle

2017-02-12 23:09:22 Dyptorden

So finden Sie ein Element, dessen Klasse keine Teilzeichenfolge enthält

Antwort

Verwandte Themen