通过唯一或单个类 JQuery 查找元素

Posted 2023-05-09

技术标签:

【中文标题】通过唯一或单个类 JQuery 查找元素【英文标题】：Find element by unique or single class JQuery 【发布时间】：2018-12-16 11:40:39 【问题描述】：

我有以下内容：

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

如何只获取 c1 类的 div？

var a = $('.c1')

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

【问题讨论】：

你的意思是你需要单独在 c1 div 中获取文本？ 【参考方案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"]

选择具有类属性的元素，其值正好等于"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-only 元素：

/* 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 查找元素的主要内容，如果未能解决你的问题，请参考以下文章