如何在jQuery中获取具有特定类名的<span>元素？

Question

使用jQuery 1.9.1和HTML5，我想捕获只有特定类名的元素。

假设我有以下HTML代码：

<div>
     <span class="req">A</span>
     <span class="req notreq">B</span>
     <span class="req notreq">C</span>
     <span class="req">D</span>
</div>

我希望只捕获具有类req的元素，即值A和D。

使用jQuery，我可以使用console.log($('.req'));捕获所有值，并使用console.log($('span.req.notreq'))捕获所有notreq值。

我只需要req值。有什么帮助吗？

- spyder

---

$('span.req:not(.notreq)'); - Derek

@spyder 你是否只需要具有“req”类且没有“notreq”类的跨度，这意味着你想要A和D值？ - lucuma

你的意思是你只想要带有 rec 类名的元素，而不包含其他类名吗？（不一定是 notreq）。 - Reinstate Monica Cellio

Answer 1

只需像这样将类名添加到选择器中...

$("span[class='req']");

那只会返回具有req作为类的元素。

- Reinstate Monica Cellio

---

我可以像这样添加更多的类吗：$("span[class='req anotherreq']"); - spyder

它将查找确切的字符串，而不是多个类的列表。为了使该示例起作用，它必须是<span class="req anotherreq"></span>，而不是<span class="anotherreq req"></span>。它正在检查“类名等于”。 - Reinstate Monica Cellio

我非常乐意承认你是对的，但是原帖作者仍然没有真正澄清他的实际问题，而因为一个含糊不清的问题而对我进行投票并不太好！ - lucuma

现在我可以给这些元素附加一个类名吗？比如说我想要将“muchreq”添加到找到的元素中。输出应该是每个元素都是<span class="req much req">...</span>。 - spyder

我已经说过，这对我来说非常清楚。如果你想编辑它，那就由你决定，而不是我 :) - Reinstate Monica Cellio

Answer 2

$('span.req').not('.notreq').each(function() {
   console.log($(this).text());
});

- lucuma

---

这并不返回只有req的那些。它返回没有notreq的那些。这不是问题所在。 - Reinstate Monica Cellio

是的。你不是吗？从这个问题中 - “我想捕获只有特定类名的元素。” - Reinstate Monica Cellio

我理解你的意思 - 这个例子并不是必要的。我想说的是，你误解了问题，并仅仅依赖于给出的示例代码进行工作。请看这个修改后的示例... http://jsfiddle.net/G9erN/1/ - Reinstate Monica Cellio

这是问题所在：现在我想捕获只有 class 为 req 的元素，即值 A 和 D...但我只需要 req 值。也许问题不是很清楚。 - lucuma

是的，我知道。就像我说的，你误解了问题。请查看我的先前评论，其中包含修改后的fiddle。 - Reinstate Monica Cellio

我更希望原帖的作者澄清并告诉我实情，而不是做出假设。我已经要求澄清了，让我们看看他/她会说什么。 - lucuma

Answer 3

使用:not伪元素：

$('span.req:not(.notreq)');

- Derek

---

这不会返回只有 req 的那些。它会返回没有 notreq 的那些。那不是问题的要求。 - Reinstate Monica Cellio