循环遍历具有相似类的元素答案

【问题标题】：Looping through elements with similar class循环遍历具有相似类的元素
【发布时间】：2015-08-04 17:08:30
【问题描述】：

如何循环访问特定 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');
            }
        }

        });

【问题讨论】：

你有什么错误吗？
否 item 具有属性 text。这就是它不起作用的原因。
正如下面的答案所指出的，HTML DOM 元素没有 text 属性。请参阅此w3schools.com/jsref/dom_obj_all.asp。您可能会将其与 jQuery 方法 .text() 混淆。看到这个api.jquery.com/text。
完全不相关，但是你的评论说//0-7而不是//0-6真的让我很烦

标签： javascript jquery angularjs loops

【解决方案1】：

使用 weekday[] 中的 indexOf，而不是文本项（您想知道日期是否在数组中）。并且在包含星期二的跨度之后还有一个额外的空间（因此 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');
        }
    }

});

【讨论】：

【解决方案2】：

循环部分很好，问题是元素没有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'); 行上还有一个额外的)）。

【讨论】：

【解决方案3】：

text 是方法而不是属性。使用.text() 而不是.text。迭代中的上下文this 也指每次迭代中的相应元素。您可以使用它来创建它的 jquery 对象。您也可以使用toggleClass 和布尔条件来根据条件添加/删除类：

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

【讨论】：

【解决方案4】：

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

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

jsBin demo

PS：

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

【讨论】：

【解决方案5】：

我会在你的 if 语句中检查 item.innerHTML 而不是 item.text

【讨论】：

你知道innerHTML 可以返回（在这种情况下修改一点HTML）来拥有标签。您不能将字符串与"<b>Sunday</b>" 等 HTML 标记进行比较，例如："Sunday"
我只是说它可以在这种情况下工作，因为文本上没有样式