jQuery

Question

我需要 select 添加了 'hidden' 属性的所有 <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 - 下面的选择器将遍历所有具有 hidden 属性并且是 optgroup 元素[=16= 的后代的 option 元素]

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() 函数来获取满足特定条件的所有 optgroups。

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 - select DOM 在 each() 循环中具有 "hidden" 属性的元素

jQuery - select DOM elements that have "hidden" attribute in an each() loop

javascript

each