检查元素是否没有属性jQuery

Question

onClick项添加了一个属性。只能选择三个项目，因此页面上只有三个元素，其属性类似于：data-selected: 1，data-selected: 2或data-selected: 3。

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

我可以使用if语句来检查元素是否有attribute，如何检查具有.item类的所有元素是否具有属性，如果没有则执行某些操作。

Answer 1

在处理数据属性时，使用 data() 方法代替attr()，现在您必须了解数据属性设置器和getter之间的区别。

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

尝试将数据属性selected的值存储在变量中，然后检查：

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

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

  

如何检查.item类的所有元素是否具有属性，如果没有，则执行某些操作。

您可以使用Jquery而不是选择器 :not() ，它将选择与给定选择器不匹配的所有元素。 ：

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

希望这有帮助。

Answer 2

只需检查所选元素是否具有必需属性（或不具有）。您可以.filter或使用.not traversal功能。

**更新**

根据我对此问题的理解，您希望将选择限制为仅三个项目。这是一个提案：

$(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>

注意：您可以将.attr和.removeAttr替换为.data和.removeData，但只有前者可能会看到更改DOM。 jQuery数据（即.data）仅保留数据的内部缓存，不会影响DOM树。在你的情况下，这两个都很好，这是一个选择问题。

Answer 3

  

如何检查.item类的所有元素是否具有属性，如果没有，则执行某些操作。

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