使用数组方法遍历列表项

Question

我使用用户输入的值来执行此操作。

以下是完整的代码：https://jsfiddle.net/7196dfyz/

这是遍历元素的代码的一部分，在这里我遇到了麻烦：

var lists = $ul.getElementsByTagName("li");
for (var i = 0; i < lists.length; ++i) {
    if (lists[i] == value) {
        $("ul").css("background-color","black");
    }
}

第一个输入应采用某些li中的值并且第二输入应当采用相应的父CCD_ 2类名。

Answer 1

我想这就是您想要的。（这是一个更新的jsfiddle）：

function func() {
    var key = $("#key").val();
    var value = $("#entry").val();
    var $ul = $("." + key);
    var lists = $ul.find("li");
    for (var i = 0; i < lists.length; ++i) {
        console.log($(lists[i]).text(), value);
        if ($(lists[i]).text() === value) {
            $(lists[i]).css("background-color","black");
        }
    } 
}

您有几个问题：

• $ul.getElementsByTagName不是有效的函数。因为$ul在这一点上是一个类似jQuery数组的对象，所以它不起作用。您需要执行$ul[0].getElementsByTagName，或者像上面的例子一样简单地使用jQuery的find()
• 您正在尝试将lists[i]和值进行比较，该值恰好是一个HTML元素。当与字符串进行比较时，它将返回<li>Say</li>，它永远不会与您键入的任何内容相匹配。使用$(lists[i]).text()应该可以得到您需要的内容
• $("ul").css("background-color","black");：如果找到匹配项，则将每个ul设置为黑色。我想你只想匹配匹配的那个。$(lists[i]).css("background-color","black");修复了此问题

你甚至可以将整个功能简化为：

function func() {
    var key = $("#key").val();
    var value = $("#entry").val();
    $("." + key).find("li").filter(function() {
        return $(this).text() === value;
    }).css("background-color","black");
}

分解：

• $("." + key)：查找类为key的ul
• .find("li")在找到的每个无序列表中查找所有列表项
• .filter(...)对于此列表中的每个元素，只向我返回符合我的条件的项：$(this).text() === value
• 最后.css("background-color","black")：将filter()函数返回的列表项的所有背景色设置为黑色