Question

我正在根据用户输入将类逐个添加到这些元素。当我到达本节的最后一个span元素时，我需要放弃弹出窗口。如何检查最后一个跨度是否已添加CSS类？

<section id="word-section"><span class="incorrect-word-c">ਪਰਕੋ</span><span class="current-word">ਚੇਤਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੋਕ</span><span>ਰੇਤ</span><span>ਕਰੋ</span><span>ਚਟਪਟ</span><span>ਤਕ</span><span>ਰੁਤ</span><span>ਚਰਚ</span><span>ਰੋਕੋ</span><span>ਰਕਤ</span><span>ਰੋਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੇਤ</span><span>ਪਰਕ</span><span>ਪਰਕ</span><span>ਪਰਤ</span><span>ਕਿ</span><span>ਰੋਕ</span><span>ਚੋਕਰ</span><span>ਰਕਤ</span><span>ਕਿ</span><span>ਰੋਕੋ</span><span>ਰੇਤ</span></section>

Answer 1

var remaining = $('#word-section > span').not('.current-word').length;

此命令将查找所有属于字节部分的直接跨度。然后，它进行过滤以仅包括那些不包含当前单词类的单词，并获取它们的长度（计数）。

如果remaining为零，则它们都具有该类。

Answer 2

回答特定问题

检查最后一个元素是否具有css类

您可以使用：

$("#word-section > span:last").hasClass("current-word")

这将：

找到word-section
获取所有直接下降跨度
将范围限制为最后一个:last
检查最后一个课程是否有课程current-word

有很多不同的方法可以做到这一点，例如：

$("#word-section").find(">span").last().is(".current-word")
$("#word-section > span.current-word:last").length == 1
$("#word-section > span.current-word").nextAll().length == 0

示例片段：

if ($("#word-section > span:last").hasClass("current-word")) {
  // show popup
  console.log("example: last word is current-word");
}
else {
  console.log("example: more words to go");
}


if ($("#word-section-sample2 > span:last").hasClass("current-word")) {
  // show popup
  console.log("sample2: last word is current-word");
}
else {
  console.log("sample2: more words to go");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="word-section"><span class="incorrect-word-c">ਪਰਕੋ</span><span class="current-word">ਚੇਤਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੋਕ</span><span>ਰੇਤ</span><span>ਕਰੋ</span><span>ਚਟਪਟ</span><span>ਤਕ</span><span>ਰੁਤ</span><span>ਚਰਚ</span><span>ਰੋਕੋ</span><span>ਰਕਤ</span><span>ਰੋਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੇਤ</span><span>ਪਰਕ</span><span>ਪਰਕ</span><span>ਪਰਤ</span><span>ਕਿ</span><span>ਰੋਕ</span><span>ਚੋਕਰ</span><span>ਰਕਤ</span><span>ਕਿ</span><span>ਰੋਕੋ</span><span>ਰੇਤ</span></section>

<section id="word-section-sample2"><span class="incorrect-word-c">ਪਰਕੋ</span><span>ਚੇਤਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੋਕ</span><span>ਰੇਤ</span><span>ਕਰੋ</span><span>ਚਟਪਟ</span><span>ਤਕ</span><span>ਰੁਤ</span><span>ਚਰਚ</span><span>ਰੋਕੋ</span><span>ਰਕਤ</span><span>ਰੋਕ</span><span>ਚਰਚ</span><span>ਪਰਕ</span><span>ਰੇਤ</span><span>ਪਰਕ</span><span>ਪਰਕ</span><span>ਪਰਤ</span><span>ਕਿ</span><span>ਰੋਕ</span><span>ਚੋਕਰ</span><span>ਰਕਤ</span><span>ਕਿ</span><span>ਰੋਕੋ</span><span class="current-word">ਰੇਤ</span></section>

如何检查最后一个元素是否具有CSS类？

2 个答案: