jquery match data attribute to values in an array

Question

I have a list kind of like below:

<p class='info' data-info='1'>Info 1 <span class='status'></span></p>
<p class='info' data-info='2'>Info 2 <span class='status'></span></p>
<p class='info' data-info='3'>Info 3 <span class='status'></span></p>......etc

What I need to do is run through all the .info elements and if the data-info number is included in an myArray change the span text. How, in jQuery do I match a value from inside an array ?

Let's see what you've tried to do, it sounds like you have a solid grasp of the concept. — Ohgodwhy, Apr 03 '13 at 08:35
at present I am looking at looping through the `.info` elements and using the `inArray()` method to match the data attribute to the array content however I am not sure if using `each()` is the best practice. — Sideshow, Apr 03 '13 at 08:38
I believe this approach is perfectly fine. If you wanted to use pure javascript you could use a `for` iteration. But that's what `.each()` is there for. — Sunyatasattva, Apr 03 '13 at 08:41
so far I've come up with: `$('.info').each(function(){var element_to_match=$(this).data('info'); if($.inArray(element_to_match, myArray, 0)){//do the rest here....});` - not tested this as yet and not used `$.inArray` before. — Sideshow, Apr 03 '13 at 08:47

billyonecan · Accepted Answer · 2013-04-03T08:50:43.503

3

$('.info').each(function() {
  $this = $(this);
  if ($.inArray($this.data('info'), myArray) !== -1) {
    $this.children('.status').text('New text value');
  }
});

Here's a fiddle

edited Apr 03 '13 at 08:50

answered Apr 03 '13 at 08:45

billyonecan

20,090
8
42
64

97ldave · Answer 2 · 2013-04-03T08:49:44.760

2

Do you need to do something like this:

$(".info").each(function() {
    if($(this).data('info').val() == <INSERT NUMBER TO MATCH>)
    {
       //Do some code here
       //example
       $(this).find("span").text("Some text here")
    }
});

edited Apr 03 '13 at 08:49

answered Apr 03 '13 at 08:41

97ldave

5,249
4
25
39

`.attr("data-info")` can be replaced by `.data('info')` – hjpotter92 Apr 03 '13 at 08:43
`$("span").text()` will replace the text of all `span` elements – billyonecan Apr 03 '13 at 08:46
@billyonecan yes I know, this was just an example. Hence the "//example" above that line. – 97ldave Apr 03 '13 at 08:46

score 1 · Answer 3 · answered Apr 03 '13 at 08:43

Like the below you can get the data-info value of each 'p' after that you can check this value is present in your array

<p class='info' data-info='1'>Info 1 <span class='status'></span></p>
<p class='info' data-info='2'>Info 2 <span class='status'></span></p>
<p class='info' data-info='3'>Info 3 <span class='status'></span></p>......etc

var info = []
$('p').each(function(){
    info.push($(this).attr('data-info'));
});
alert(info)

score 1 · Answer 4 · answered Apr 03 '13 at 08:45

1

Instead of looping through .info elements, how about looping through the myArray.

for (var i = 0; i < myArray.length; i++) {
    $("p[data-info=" + myArray[i] + "] .status").html("Your text");
}

answered Apr 03 '13 at 08:45

viclim

959
8
16

Jay Mayu · Answer 5 · 2013-04-03T08:56:20.250

1

var valueToFind = ['3', '0', '1'];
$('.info').each(function(){
    var infoData = $(this).data('info');
    for(i=0;i<valueToFind.length;i++){
        if(valueToFind[i]==infoData){
            $(this).find('.status').html('found');
        }
    }
});

will do the magic.

here is a live fiddle example http://jsfiddle.net/mayooresan/fw94c/

edited Apr 03 '13 at 08:56

answered Apr 03 '13 at 08:45

Jay Mayu

17,023
32
114
148

Mithun Sreedharan · Answer 6 · 2013-04-03T08:57:57.627

0

Here you go

Live example http://jsfiddle.net/mithun/5Ryu5/3/

var infoSpecialArray = [2, 3, 4, 5];
$("p.info").each(function() {
    if($.inArray(parseInt($(this).data('info'), 10), infoSpecialArray) != -1) {
      $(this).find('span.status').html('special')
    }
});

edited Apr 03 '13 at 08:57

answered Apr 03 '13 at 08:49

Mithun Sreedharan

49,883
70
181
236

jquery match data attribute to values in an array

6 Answers6