Question

我具有以下内容：

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

如何仅获得 c1 类的div？

var a = $('.c1')

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

Answer 1

我对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"]

选择具有class属性（其值完全等于"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'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</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'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</div>

最后，使用普通CSS（取决于您要查找的结果）：

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

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

<div class='c1'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</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'>content</div>
<div class='c1 c2'>content</div>
<div class='c1'>content</div>

通过唯一或单个类JQuery

1 个答案: