如何 return 一个基于 class 的元素与多个 classes

Question

假设我有 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>

在我的 js 中有以下内容

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

返回全部三个 div。我只想调用 FIRST 和 LAST div。使用 jquery 如何实现？

Answer 1

选中 jQuery 等于选择器：http://api.jquery.com/attribute-equals-selector/。以下三种可能：

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

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

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

Answer 2

这可以通过 javascript 轻松实现。只需检查 <div> 的 classList 是否等于您想要 select 的 class。如果不相等，则表示 classList 包含多个 class.

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 3

虽然你说 如何使用 jquery 来实现？ 你可以像这样使用 jquery

//$('.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

我建议，在这种情况下：

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

或者，更简单地说：

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

参考文献：

如何 return 一个基于 class 的元素与多个 classes

How to return ONE element based on class with multiple classes

html

javascript

jquery

getelementbyid