Wie ein Element zurückzukehren, basierend auf der Klasse mit mehreren Klassen

Question

Say I have 3 divs

<div class="one"></div> 
<div class="one two"></div> 
<div class="one two three"></div> 
<div class="one two"></div> 
<div class="one"></div> 

Und in meinem js ich habe folgende

var active = document.getElementsByClassName("one"); 

, die alle drei divs zurückkehren. Ich möchte nur das FIRST und LAST div genannt werden. Wie kann dies mit jQuery erreicht werden?

Answer 1

Dieser leicht mit javascript erreicht werden kann. Überprüfen Sie, ob der classList eines <div> gleich dem class ist, den Sie auswählen möchten. Wenn es nicht gleich ist, bedeutet dies, dass classList mehr als eine Klasse enthält.

function getValue() 
 
{ 
 
    var divs = document.getElementsByClassName("one"); 
 
    
 
    for(var i=0; i < divs.length; i++) 
 
    { 
 
    if(divs[i].classList == 'one') 
 
    { 
 
     alert(divs[i].innerHTML); 
 
    } 
 
    } 
 
}

<div class="one">hi</div> 
 
<div class="one two">there</div> 
 
<div class="one two three">coffee?</div> 
 
<div class="one">not today?</div> 
 

 
<input type="button" onclick="getValue()" value="click me" />

Answer 2

Überprüfen Sie den jQuery-Equalizer: http://api.jquery.com/attribute-equals-selector/. Nach drei Möglichkeiten:

jQuery("[class='My class1']") 

$$("[class='My class1']") 

$("[class='My class1']"). 

Answer 3

Während Sie sagte, wie dies mit Jquery erreicht werden kann? Sie können jquery wie diese

//$('.one:first , .one:last').css('background' , 'red'); // if you just need first one and last one 
 

 
$('.one:not(.two , .three)').css('background' , 'red'); // if you need the one class but not two or three

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one">1</div> 
 
<div class="one two">2</div> 
 
<div class="one two three">3</div> 
 
<div class="one">1</div>

Answer 4

ich in diesem Fall würde vorschlagen, verwenden:

// finding all elements whose 'class' attribute starts with 
// 'one' and also ends with 'one' 
document.querySelectorAll('[class^="one"][class$="one"]'); 

Oder, einfacher gesagt:

// finding all elements whose class attribute-value is 
// equal to 'one' 
document.querySelectorAll('[class="one"]'); 

Referenzen:

• Attribute selectors.
• document.querySelectorAll()