Javascript/JQuery troubleshooting

Question

Before I explain my problem, I want to show you the process of my Javascript:

When you input a text in the input bar and press submit, the script creates a "div" and places that text in that newly created div and puts it into a permanent div (Div that already existed, and not created from javascript).

For example:

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

The newly created .woof and .box div's are placed into an already existing .list div. The toAdd is the text from the input value.

Simultaneously, Javascript inputs the toAdd string into a variable containing an array (Ex: Var theArray = []). After inputting several texts, the 'theArray' variable array becomes filled with strings (Ex: var theArray = ["Meow", "Cheeseburger", "Yes"]) while--as previously stated--adding those string to the HTML (Ex: So, that means the HTML <div class='list'> should also have "Meow", "Cheeseburger", etc). Then there is a script that creates a random number which randomly selects one of the strings from the array (Ex: The random number generated selects "Yes" from the array).

The problem I am having is creating a Javascript/Jquery that gets the results from the random generated number and finding it in the HTML. The script I created allowed me to successfully pick a string from the array, but I am trying to get that pick to become highlighted in the HTML list.

For example, the random generated number selects "Yes" string from the Array. I then want to create a script that finds the "Yes" in the HTML div, and highlight it (with CSS or etc) so the viewer can see that that String was chosen.

So, the problem I am having is the one above this sentence. I can't find a way to connect what the random number generated picked with the strings in HTML. Hopefully, this explains it.

Answer 1

You can use the jQuery .eq method which narrows down the elements to the element of the specific index. Basically your indexes are in order of how the elements appear in the DOM.

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

Or an alternative

textToFind = myArray[randNum];

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

or depending on what you want.

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

EDIT
Took some googling (see here in the comment section). If you don't want cheese to match cheeseburger as well you probably need to make your own jQuery .filter() function to narrow down the selection of DOM elements. I've written it for you in your case so don't worry. It's also case insensitive so just take out the .toLowerCase() if you don't want it to be. It also doesn't care about white-space due to .trim() you can take that one off to if you'll always declare it without white-space.

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

or in this case you could find by the woof class, which would give it the background-color instead of box.

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

Here's a fiddle http://jsfiddle.net/kx7pd/

BTW use your textToFind variable when using the above example instead of the string 'cheese'. (pun intended.)