Question

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

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

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

第一个输入应采用某些li中的值第二个输入应该取相应的父ul类名。

Answer 1

我认为这是你正在寻找的东西。（Here是一个更新的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。
.find("li")查找找到的每个无序列表中的所有列表项。
.filter(...)对于此列表中的每个元素，只返回符合我条件的项目：$(this).text() === value。
最后.css("background-color","black")：将所有背景颜色设置为从filter()函数返回的列表项的黑色。

使用数组方法遍历列表项

1 个答案: