循环遍历类相似的元素

Looping through elements with similar class

本文关键字：元素 相似 遍历 循环      更新时间：2023-09-26

如何循环遍历特定div标记内的一组元素?这个方法是在Angular.js代码的工厂中定义的。

<div id="idName">
  <span class="className">Monday</span>
  <span class="className">Tuesday </span>
</div>
Javascript: 

 var currentTime = new Date();
        var today = currentTime.getDay(); //0-7
        var d = new Date();
        var weekday = new Array(7);
        weekday[0]=  "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
$('#idName .className').each(function(index, item) {
    if(item.text) //This part never runs
        {   
            if(item.text.indexOf(weekday[today])!=-1) { 
                item.addClass('currentDay'));
            }
            else {
                item.removeClass('currentDay');
            }
        }
        });

使用weekday[]中的indexOf，而不是文本项(您想知道日期是否在数组中)。并且在包含Tuesday的span之后有一个额外的空间(因此它不会被indexOf找到)。试试这个:

<div id="idName">
<span class="className">Monday</span>
<span class="className">Tuesday</span>
</div>

然后按如下方式更新代码(这部分没有更改):

var currentTime = new Date();
var today = currentTime.getDay(); //0-7
var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";

addClass/removeClass也不是item (dom元素)的函数，而是每个循环中的$(item)的函数。

$('#idName .className').each(function(index, item) {
    if(item.textContent) //This part never runs
    {
        if(weekday.indexOf(item.textContent) == today) {
            $(item).addClass('currentDay');
        }
        else {
            $(item).removeClass('currentDay');
        }
    }
});

循环部分很好，问题是元素没有text属性。你可能想用$(item).text()。还请注意，item将只是一个DOM元素，而不是一个jQuery对象。获得该元素的惯用方法是this，而不是item(除非您必须这样做，因为您正在将this用于其他内容):

$('#idName .className').each(function(index) {
    var item = $(this),
        text = item.text();
    if (text) {
        if (text.indexOf(weekday[today]) != -1) {
            item.addClass('currentDay');
        } else {
            item.removeClass('currentDay');
        }
    }
});

(在item.addClass('currentDay');行上还有一个额外的))。

text是方法而不是属性。使用.text()代替.text。context this在迭代中指的是每次迭代中各自的元素。您可以使用它来创建它的jquery对象。你也可以使用toggleClass和布尔条件来添加/删除基于条件的类:

$('#idName .className').each(function() {
  if($(this).text().length) 
    $(this).toggleClass('currentDay',$(this).text().indexOf(weekday[today])!=-1);
});

$("#idName .className")已经是一个元素集合，你可以直接进入.text() 

$('#idName .className').text(function(i,v) {
  $(this).toggleClass("currentDay", $.trim(v)===weekday[today]);
});

jsBin演示

p。S:

  • 你的代码中有额外的);。使用开发人员工具、控制台检查错误。
  • currentTime.getDay()不能给你0-7但是0-6因为星期天是0而星期六是6
    • 在使用方法之前先阅读jQuery文档。
  • weekday Array可以定义为var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  • 使用$.trim()删除不需要的换行空白

我会检查item。innerHTML而不是item。if语句中的文本

相关文章：