代码之家 › 专栏 › 技术社区 › ameliapond

按唯一或单个类jquery查找元素

jquery-selectors class jquery

ameliapond · 技术社区 · 7 年前

我有以下内容:

<div class='c1'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</div>

如何在课堂上获得DIV C1 只有?

var a = $('.c1')

给我三个div但是我只想要第一个和第三个。

1 回复 | 直到 7 年前

David Thomas 7 年前

我对jquery的第一个建议是:

// select all elements that match the selector,
// filter that collection using the filter()
// method:
$('.c1').filter(function(_, el) {

  // el is a reference to the current element in the
  // collection over which we're iterating;
  // here we return - and therefore keep - only those
  // nodes that have a classList of length equal to 1
  // (therefore they have only one class)
  return el.classList.length === 1;

// styling the elements using the css() method, simply
// to show which elements were selected and matched:
}).css('background-color', 'limegreen');

$('.c1').filter(function(_, el) {
  return el.classList.length === 1;
}).css('background-color', 'limegreen');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='c1'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</div>

使用dom–普通javascript–我们可以使用几乎完全相同的方法:

// converting the supplied iterable Object into an Array,
// using Array.from():
Array.from(

  // finding all elements matching the supplied selector:
  document.querySelectorAll('.c1')

// iterating over the created Array of Nodes using
// Array.prototype.filter():
).filter(
  // 'el' is a reference to the current element node
  // of the Array of element nodes over which we're
  // iterating.

  // using an Arrow function (since we don't need to use
  // or change the current 'this'); here we check (as above)
  // that the classList of the current element node is
  // equal to 1:
  (el) => el.classList.length === 1

// Array.prototype.filter() returns a new Array, retaining
// only those elements for which the assessment returned
// true/truthy; we now use Array.prototype.forEach() to
// iterate over the returned Array:
).forEach(

  // using another Arrow function; here updating the
  // background-color of the retained element nodes
  // to reflect the element nodes that were retained:
  (el) => el.style.backgroundColor = 'limegreen'
);

Array.from(document.querySelectorAll('.c1')).filter(
  (el) => el.classList.length === 1
).forEach(
  (el) => el.style.backgroundColor = 'limegreen'
);

<div class='c1'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</div>

显然,如果元素只有一个类(或者您希望查找只有一个类的元素),则可以使用属性选择器:

[class="c1"]

它选择值正好等于 "c1" 是的。

对于jquery,这将给出:

$('[class="c1"]').css('background-color', 'limegreen');

$('[class="c1"]').css('background-color', 'limegreen');

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<div class='c1'>内容<div>
<div class='c1 c2'>内容</div>
<div class='c1'>内容<div>

使用dom(纯javascript):

// here don't require the use of Array.from() since
// NodeList.prototype.forEach() allows us to call
// the forEach() method directly:
document.querySelectorAll('[class="c1"]')).forEach(
  (el) => el.style.backgroundColor = 'limegreen'
);

document.querySelectorAll('[class="c1"]')).forEach(
  (el) => el.style.backgroundColor = 'limegreen'
);

<div class='c1'>内容</div>
<div class='c1 c2'>内容</div>
<div class='c1'>内容<div>

最后,使用普通的css(取决于您特别寻找的结果):

[class="c1"] {
  background-color: limegreen;
}

[class="c1"] {
  background-color: limegreen;
}

<div class='c1'>内容</div>
<div class='c1 c2'>内容</div>
<div class='c1'>内容<div>

或者,如果你想隐瞒- .c1 -仅元素:

/* note that without a modifier for the negation-
   operator, whether it's the use of 'div' or
   supplying an ancestor (such as: 'body :not(...)')
   the :not(...) may also match the <html> and/or
   <body> element (as well as any other ancestor.
   Be careful... */
div:not([class="c1"]) {
  /* Using opacity: 0.3 in order to allow
     matched elements to be seen as being
     matched, rather than just hidden away */
  opacity: 0.3;
}

div:not([class=c1]) {
  opacity: 0.3;
}

<div class='c1'>内容</div>
<div class='c1 c2'>内容</div>
<div class='c1'>内容<div>