Question

我需要选择添加了“隐藏”属性的所有<select>元素。这是加价：

<optgroup label="Label 1">
    <option value="978" hidden>Option 1</option>
    <option value="987" hidden>Option 2</option>
    <option value="987" hidden>Option 3</option>
    <option value="987">Option 4</option>
</optgroup>

我只显示一个<optgroup>，但标记中有很多。

到目前为止，我已经提出了这个代码：

jQuery('optgroup').each(function() {
    var options = jQuery(this).find('option');
    jQuery.each(options, function(index, value) {
        if ($(value).data('hidden') !== undefined) {
            console.log('Found it!');
        }
   });
});

不幸的是，内部条件的代码永远不会成立。我在这里缺少什么？

Answer 1

使用attribute exists selector - 以下选择器将遍历具有option属性并且是hidden元素

的后代的所有optgroup元素

jQuery('optgroup option[hidden]').each(function () {
    console.log('Found it!', this);
});

保持你的结构

jQuery('optgroup').each(function () {
    jQuery(this).find('option').each(function () {
        if (jQuery(this).is('[hidden]')) {
            console.log('Found it!');
        }
    });
});

Answer 2

问题在于，当您真正使用实际（无效）属性时，您正在检查数据属性

我认为你不需要循环就可以做你想做的事情。您只需使用.filter()函数即可获得满足特定条件的所有optgroup。

var optgroupsWithAllHiddenOptions = jQuery('optgroup').filter(function(){
    return jQuery(this).find('option[hidden]').length == jQuery(this).find('option').length;
});

或只是

jQuery('optgroup').filter(function(){
    return jQuery(this).find('option[hidden]').length == jQuery(this).find('option').length;
}).hide();

jQuery('optgroup').filter(function() {
  return $(this).find('option[hidden]').length == $(this).find('option').length;
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <optgroup label="Label 1">
    <option value="978" hidden>Option 1</option>
    <option value="987" hidden>Option 2</option>
    <option value="987" hidden>Option 3</option>
    <option value="987">Option 4</option>
  </optgroup>
  <optgroup label="Label 2">
    <option value="978" hidden>Option 1</option>
    <option value="987" hidden>Option 2</option>
    <option value="987" hidden>Option 3</option>
    <option value="987" hidden>Option 4</option>
  </optgroup>
  <optgroup label="Label 3">
    <option value="978" hidden>Option 1</option>
    <option value="987" hidden>Option 2</option>
    <option value="987" hidden>Option 3</option>
    <option value="987">Option 4</option>
  </optgroup>
  <optgroup label="Label 4">
    <option value="978" hidden>Option 1</option>
    <option value="987" hidden>Option 2</option>
    <option value="987" hidden>Option 3</option>
    <option value="987" hidden>Option 4</option>
  </optgroup>
</select>

jQuery - 选择在each（）循环中具有“hidden”属性的DOM元素

2 个答案: