检查元素是否没有属性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) {
    ...
}