jQuery / Javascript: iterate over an array to select divs from the array values

Question

I have a series of divs on my page and am having trouble selecting each div containing a specific string when the string is kept in an array. For example, if the array = ['foo', 'qux'], I would like to be able to select the div containing 'foo', and the div containing 'qux'.

<div class="word word1">foo</div>
<div class="word word2">bar</div>
<div class="word word3">baz</div>
<div class="word word4">qux</div>

The script

array =  ['foo', 'qux'];
for (var i = 0; i < array.length; i++) {
  array_text = array[i];
  alert( $( "div:contains(array_text)" ).text() );
}

I have also used this script without success:

correct_matches =  ['foo', 'qux'];
$.each(correct_matches, function(index, value){
  alert( $( "div:contains(value)" ).text() );
  }
);

I am using the alert only to ascertain whether or not the $( "div:contains(array_text)") selector is working properly. The selector is where I am running into problems: $( "div:contains('bar')" ) works as expected. Once I use the array_text variable, I get an alert with an empty string. Any suggestions? Thank you.

You need to escape the selector to include a variable, otherwise it's just looking for contains "value" not the variable value. — Sterling Archer
– Sterling Archer, Commented May 30, 2014 at 19:02

cr0ss · Accepted Answer · 2014-05-30 19:12:15Z

1

Check this FIDDLE.

You were testing if the text array_text was contained by the div.

I'm not sure if this is the most optimal, but it works.

jQuery version:

$(function () {

    var array = ['baz', 'qux'];
    for (var i = 0; i < array.length; i++) {
        array_text = array[i];
        $('div').each(function () {
            if ($(this).text() == array_text) {
                alert(array[i]);
                // do more stuff with $(this) (which is the div)
            }
        });
    }
});

edited May 30, 2014 at 19:12

answered May 30, 2014 at 19:06

cr0ss

8775 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3291025 Over a year ago

Works exactly as I wanted, and more, because now I can do more stuff with $(this), which is my next step, many thanks.

CyberFox · Accepted Answer · 2014-05-30 20:04:58Z

0

var array =  ['foo', 'qux'];
var elements = document.querySelectorAll(".word"); // get all elements of class word

for(var i =0;i <array   .length;i++ ) // first loop for your array
for(var ii=0;ii<elements.length;ii++) // second loop for the elements in the collection
if(array[i] == elements[ii].innerHTML){ // check for matches
  elements[ii]; // this is the handle to the html element
}

Run through both collections and check when there is a match between the 2 collections.

edited May 30, 2014 at 20:04

answered May 30, 2014 at 19:03

CyberFox

8217 silver badges26 bronze badges

6 Comments

Sterling Archer Over a year ago

Simple as 2 syntax errors and some unexplained code? No way!

CyberFox Over a year ago

Just fixed it. Sorry bit quick on the reply button

Sterling Archer Over a year ago

You still haven't explained your code. That's critical for a good answer

CyberFox Over a year ago

added comment for every line

cr0ss Over a year ago

maybe you should indent your code and using curly braces {} is good practice.

|

Collectives™ on Stack Overflow

jQuery / Javascript: iterate over an array to select divs from the array values

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related