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.

Answer 1

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.

Answer 2

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 (ie .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.

Answer 3

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) {
    ...
}