如何在javascript jquery中区分偶数/奇数日期

Question

我试图添加一个类到所有奇数日期，但我没有成功。我做错了什么?

<ul>  
<li>2021-06-01</li>  
<li>2021-06-02</li>  
<li>2021-06-03</li>  
<li>2021-06-04</li>  
<li>2021-06-05</li>  
<li>2021-06-06</li>  
<li>2021-06-07</li> 
<li>2021-06-08</li>  
<li>2021-06-09</li>  
<li>2021-06-10</li>  
</ul> 

和我的js:

var date = $("li").text();
var lastchar = $("li").text().substr(9, 10); // last char from date
if(lastchar % 2 == 1) { // odd number
$("li").addClass('odd'); // add class odd to li
}

Answer 1

使用filter过滤元素，然后仅使用addClass。

$("li").filter((i,v) => parseInt($(v).text().substr(9,10),10) % 2 !== 0)
.addClass("odd");

.odd{ background-color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>  
<li>2021-06-01</li>  
<li>2021-06-02</li>  
<li>2021-06-03</li>  
<li>2021-06-04</li>  
<li>2021-06-05</li>  
<li>2021-06-06</li>  
<li>2021-06-07</li> 
<li>2021-06-08</li>  
<li>2021-06-09</li>  
<li>2021-06-10</li>  
</ul>

Answer 2

只需用.each()包装代码，循环遍历所有项并逐个实现逻辑:

$('li').each(function(_, el){
var date = $(el).text();
var lastchar = $(el).text().substr(9, 10); // last char from date
if(lastchar % 2 == 1) { // odd number
$(el).addClass('odd'); // add class odd to li
}
});

.odd{
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>  
<li>2021-06-01</li>  
<li>2021-06-02</li>  
<li>2021-06-03</li>  
<li>2021-06-04</li>  
<li>2021-06-05</li>  
<li>2021-06-06</li>  
<li>2021-06-07</li> 
<li>2021-06-08</li>  
<li>2021-06-09</li>  
<li>2021-06-10</li>  
</ul>

Answer 3

var li = document.getElementsByTagName("li")
var connect = []
for (var i = 0; i < li.length; i++) {
connect.push(parseInt(li[i].innerHTML.slice(8, 10)))
}
for (var b = 0; b < connect.length; b++) {
if (connect[b] % 2 != 0) {
li[b].classList.add("odd")
} else {
li[b].classList.add("even")
}
}

Answer 4

如果没有jQuery，您可以使用选择器，然后遍历集合并为最后一个字符为偶数的集合分配一个类，例如

window.onload = () => {
document.querySelectorAll('li').forEach(node => 
node.textContent.slice(-1) % 2? null : node.classList.add('red')
)
};

.red {color: red}

<ul>  
<li>2021-06-01</li>  
<li>2021-06-02</li>  
<li>2021-06-03</li>  
<li>2021-06-04</li>  
<li>2021-06-05</li>  
<li>2021-06-06</li>  
<li>2021-06-07</li> 
<li>2021-06-08</li>  
<li>2021-06-09</li>  
<li>2021-06-10</li>  
</ul>

您可能希望像node.textContent.trim().slice(-1)那样加入trim以删除任何潜入的前导或尾随空格。