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

Question

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

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

标签： javascriptjquery

Answer 1

回答具体问题

检查最后一个元素是否有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>ਚਰਚ&lt;/span><span>ਪਰਕ&lt;/span><span>ਰੋਕ&lt;/span><span>ਰੇਤ&lt;/span><span>ਕਰੋ&lt;/span><span>ਚਟਪਟ</span><span>ਤਕ</span><span>ਰੁਤ&lt;/span><span>ਚਰਚ&lt;/span><span>ਰੋਕੋ</span><span>ਰਕਤ&lt;/span><span>ਰੋਕ&lt;/span><span>ਚਰਚ&lt;/span><span>ਪਰਕ&lt;/span><span>ਰੇਤ&lt;/span><span>ਪਰਕ&lt;/span><span>ਪਰਕ&lt;/span><span>ਪਰਤ&lt;/span><span>ਕਿ</span><span>ਰੋਕ&lt;/span><span>ਚੋਕਰ</span><span>ਰਕਤ&lt;/span><span>ਕਿ</span><span>ਰੋਕੋ</span><span>ਰੇਤ&lt;/span></section>

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