Check if element doesn't have attribute jQuery

Question

onClick of an item it adds an attribute. Only three items can be selected so they'll only ever be three elements on the page with the attribute like : data-selected: 1, data-selected: 2 or data-selected: 3.

if ($('.item').attr('data-selected', '1') || $('.item').attr('data-selected', '1') || 
    $('.item').attr('data-selected', '1')) {
}

I can do an if statement to check if an element has an attribute, how do I check if all the elements with .item class have an attribute and if not then do something.

Do you want to check the value of the attribute? Whether the attribute exists? — Oriol
– Oriol, Commented Jan 26, 2016 at 16:14

Zakaria Acharki · Accepted Answer · 2016-01-26 17:35:32Z

4

Use data() method instead of attr() when you deal with data attributes, and you have to now the difference between data attribute setters and getters.

Setter :

$('.item').data('selected', '1'); // assign to the data attribute selected the value 1

Getter :

$('.item').data('selected'); //get the value 1 from data attribute selected

Try to store the value of data attribute selected in variable then check :

var selected = $('.item').data('selected');

if (selected == 1 || selected ==2 || selected == 3) {
    //Code here
}

how do I check if all the elements with .item class have an attribute and if not then do something.

You could use Jquery not selector :not() that will selects all elements that do not match the given selector. :

if($('.item:not([data-selected])').length)
    //Not all items has attribute data-selected
else
    //All items has attribute data-selected

Hope this helps.

edited Jan 26, 2016 at 17:35

answered Jan 26, 2016 at 16:05

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

8 Comments

Yanick Rochon Over a year ago

This will not work if the attribute is set directly in the HTML; it will only work if the data is set using .data.

Zakaria Acharki Over a year ago

No that not true, should work also with data attribute set directly in the HTML.

Oriol Over a year ago

.data() reads data-* attributes but doesn't assign to them.

Yanick Rochon Over a year ago

Wait, yes, I was thinking the :data() selector (from jQuery UI) my bad :)

Oriol Over a year ago

@ZakariaAcharki .data() can store data but not in data-* attributes. jsfiddle.net/Ly731bdh

|

Yanick Rochon · Accepted Answer · 2016-01-26 17:22:30Z

Just check that your selected elements have the required attribute (or not). You can .filter or use the .not traversal function.

UPDATE

Based on what I understand of this question, you want to restrict selection to only three items. Here's a proposal :

$(function () {
  $('.item').on('click', function () {
    var checked = $(this).prop('checked'); // currently checked?
    var selected = $('.item').filter('[data-selected]');

    if (checked) {
      $(this).attr('data-selected', -1).parent().addClass('selected');
      selected = selected.add(this);
    } else {
      $(this).removeAttr('data-selected').parent().removeClass('selected');
      selected = selected.not(this);
    }

    selected.sort(function (a, b) {
      return $(a).attr('data-selected') - $(b).attr('data-selected');
    }).each(function (index) {
      if (index >= 3) {
        $(this).prop('checked', false).removeAttr('data-selected').parent().removeClass('selected');
      } else {
        $(this).attr('data-selected', index + 1);
      }
    });
  });
});

.selected { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="item">Item 1</label>
<label><input type="checkbox" class="item">Item 2</label>
<label><input type="checkbox" class="item">Item 3</label>
<label><input type="checkbox" class="item">Item 4</label>
<label><input type="checkbox" class="item">Item 5</label>
<label><input type="checkbox" class="item">Item 6</label>

Note: you may replace .attr and .removeAttr with .data and .removeData, however only with the former that you may see changes on the DOM. jQuery data (i.e. .data) only keep internal cache of the data and does not affect the DOM tree. Either is fine in your case and this is a matter of choice.

StriplingWarrior · Accepted Answer · 2016-01-26 16:07:22Z

0

how do I check if all the elements with .item class have an attribute and if not then do something.

var items = $('.item');
var itemsWithoutAttribute = items.filter(':not([data-selected]');
if(itemsWithoutAttribute.length > 0) {
    ...
}

answered Jan 26, 2016 at 16:07

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Collectives™ on Stack Overflow

Check if element doesn't have attribute jQuery

3 Answers 3

8 Comments

UPDATE

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

** UPDATE **

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

UPDATE