Question

在我解释我的问题之前，我想向您展示我的Javascript过程：

当您在输入栏中输入文本并按提交时，脚本会创建一个“div”并将该文本放在新创建的div中并将其放入永久div（已存在的Div，而不是从javascript创建的）。

例如：

$(".list").append('<div class="woof">' + '<div class="box">' + toAdd + '</div>' + '</div>');

新创建的.woof和.box div被放置在已存在的.list div中。 toAdd是输入值中的文本。

同时，Javascript将toAdd字符串输入到包含数组的变量中（例如：Var theArray = []）。输入几个文本后，'theArray'变量数组将填充字符串（例如：var theArray = ["Meow", "Cheeseburger", "Yes"]），而 - 如前所述 - 将这些字符串添加到HTML中（例如：这意味着HTML {{1还应该有“喵”，“芝士汉堡”等）。然后有一个脚本创建一个随机数，从数组中随机选择一个字符串（例如：生成的随机数从数组中选择“是”）。

我遇到的问题是创建一个Javascript / Jquery，它从随机生成的数字中获取结果并在HTML中找到它。我创建的脚本允许我成功从数组中选择一个字符串，但我试图让这个选择在HTML列表中突出显示。

例如，随机生成的数字从数组中选择“是”字符串。然后我想创建一个脚本，在HTML div中找到“是”，然后突出显示它（使用CSS等），这样查看者就可以看到该字符串被选中了。

所以，我遇到的问题是这句话之上的问题。我找不到一种方法来连接生成的随机数与HTML中的字符串。希望这能解释它。

Answer 1

您可以使用jQuery .eq方法，该方法将元素缩小到特定索引的元素。基本上，您的索引按元素在DOM中的显示顺序排列。

$(".list").find(".woof").eq(randNum).addClass("background-color");

或另类

textToFind = myArray[randNum];

$(".list").find("div:contains('" + textToFind + "')").addClass("background-color");

或取决于你想要的东西。

$(".list").find("div:contains('" + textToFind + "')").parent().addClass("background-color");

修改
在评论部分进行了一些谷歌搜索（see here）。如果您不希望奶酪与芝士汉堡相匹配，您可能需要制作自己的jQuery .filter()函数来缩小DOM元素的选择范围。在你的情况下，我已经为你写了这封，所以不用担心。它也不区分大小写，所以如果你不想要它，请取出.toLowerCase()。如果你总是在没有空格的情况下声明它，那么由于.trim()你可以把它关掉，所以它也不关心空白空间。

$('.list').find(".box").filter(function(){ return $(this).text().trim().toLowerCase() === 'cheese'; }).addClass("background-blue");

或者在这种情况下你可以通过woof类找到它，它会给它背景色而不是盒子。

$('.list').find(".woof").filter(function(){ return $(this).text().trim().toLowerCase() === 'cheese'; }).addClass("background-blue");

这是一个小提琴http://jsfiddle.net/kx7pd/

在使用上面的示例而不是字符串'cheese'时，BTW使用textToFind变量。（双关语。）

Javascript / JQuery故障排除

1 个答案: