Javascript/JQuery 故障排除

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 <div class='list'> 也应该有“喵”、“芝士汉堡”等)。然后有一个脚本创建一个随机数，该随机数从数组中随机选择一个字符串(例如:生成的随机数从数组中选择"is")。

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

例如，随机生成的数字从数组中选择“Yes”字符串。然后我想创建一个脚本，在 HTML div 中找到"is"，并突出显示它(使用 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");

这是一把 fiddle http://jsfiddle.net/kx7pd/

顺便说一句，在使用上述示例时使用您的 textToFind 变量而不是字符串 'cheese'。 (双关语。)