jQuery check if list has attribute

Question

So I have a big list of li tags that have the following:

<li class="square" data-selected= data-square="1"></li>
<li class="square" data-selected= data-square="2"></li>
<li class="square" data-selected= data-square="3"></li>

onClick I then add an attribute that's in the data-square to the data-selected so onClick my selected element would look like:

<li class="square" data-selected="3" data-square="3"></li>

I have 30 of these li tags. I basically want to check if any of them have been selected and if so do something.

    $('.square').each(function() {
      console.log(count);
      var attrSquare = $('.square').attr('data-selected');

      if (typeof attrSquare !== typeof undefined && attrSquare !== false) {
          console.log('test');
      } else {
        console.log('selected');
      }
    });

At the moment, i've placed console.logs in to see if i'm getting into where i'm getting in. However, it just spits out 30 test in the window console. I never get into the selected console. Anyone know where i'm going wrong?

lol sorry @Tushar good spot. I had another variable that I was testing with above :) *took it out* — pourmesomecode, Dec 16 '15 at 11:10
@ArunPJohny it's 200 lines long so couldn't add it in. In short, I do `.each` over some JSON data which gives me back the numbers you see in `data-square`. I then `.each()` over my html elements and append them to the attri — pourmesomecode, Dec 16 '15 at 11:13
Yeah, i'm still learning. May not be the best method to be handling data and reading etc. but it's how I got it working and works nicely for what I need :) — pourmesomecode, Dec 16 '15 at 11:19
But it will be much more easier if you can add a class also to the `li` if it is selected — Arun P Johny, Dec 16 '15 at 11:24
Thanks @Liam I wasn't aware I couldn't read html attributes with `attr()` I needed to use `data()` — pourmesomecode, Dec 16 '15 at 11:34
Data is a specialised type of attribute. It's a bit pedantic but really you should always read data using the specialised version. [More info](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) — Liam, Dec 16 '15 at 11:34
@ArunPJohny might be a stupid question. How come in your fiddle you put `return false` what does that exactly do? Is that in replace of having an `ifelse` statement setting the `selected` var back to false? — pourmesomecode, Dec 16 '15 at 12:04
@MeMyselfAndI in `.each()` method will stop the iteration if `false` is returned from it... in our case, if we find 1 checked item there is no need to check more elements — Arun P Johny, Dec 16 '15 at 12:06

Milind Anantwar · Answer 1 · 2015-12-16T11:15:26.707

2

You can only target elements that have data-selected attribute and then modify its data selected value:

$('.square[data-selected]').attr('data-selected',function(){
  return $(this).data('square');
});

Working Demo

edited Dec 16 '15 at 11:15

answered Dec 16 '15 at 11:10

Milind Anantwar

81,290
25
94
125

1

`$(this).data('square')` – Tushar Dec 16 '15 at 11:12
1

Same for `data-selected` – Tushar Dec 16 '15 at 11:18
@Tushar: but that wont reflect in attribute. i guess OP want it as attribute and not data(by looking at o/p markup required) – Milind Anantwar Dec 16 '15 at 11:19

Harsh Sanghani · Answer 2 · 2015-12-16T11:18:41.160

-1

Please change the jquery code as following :-

$('.square').each(function() {
      console.log(count);
      var attrSquare = $(this).attr('data-selected');

      if (typeof attrSquare !== typeof undefined && attrSquare !== false) {
          console.log('test');
      } else {
        console.log('selected');
      }
    });

It may help you.

edited Dec 16 '15 at 11:18

answered Dec 16 '15 at 11:13

Harsh Sanghani

1,666
1
14
32

You **were** unwrapping the jquery object. So that would result in a undefined error. It **now** has the same error that OP has. Basically you haven't addressed the problem. You also haven't said what you've done and why. – Liam Dec 16 '15 at 11:38
this smells of keep tweaking the syntax in a hope of fixing the issue. Rather than understanding the issue and formulating a solution – Liam Dec 16 '15 at 11:40

score -1 · Answer 3 · edited Dec 16 '15 at 11:14

-1

find element which have data-selected attribute

$('.square[attr="data-selected"]').each(function(){
    // do something.
})

edited Dec 16 '15 at 11:14

Liam

27,717
28
128
190

answered Dec 16 '15 at 11:13

dadarya

313
1
6

It will look for `.square` elements with an attribute `attr` equals to `data-selected`. And anyway, you aren't answering question – A. Wolff Dec 16 '15 at 11:15

jQuery check if list has attribute

3 Answers3