Question

我的HTML结构包括：

A）具有以下类别的N-div列表：

<div class="classes">
   <div class="alpha">...</div>
   <div class="beta">....</div>
   <div class="gamma">.....</div>
   <div class="alpha beta">.....</div>
   <div class="alpha">....</div>
   <div class="beta gamma"></div>
   <div class="alpha beta gamma">.....</div>
   <div class="alpha">....</div>
   ....
</div>

B）包含N个选项的选择，其中包含数据属性，例如：

<select id="classSelect">
    <option value="something" data-class="alpha"></option>
    <option value="something-2" data-class="alpha"></option>
    <option value="something-3" data-class="beta"></option>
    <option value="something-4" data-class="alpha beta"></option>
    <option value="something-4" data-class="beta gamma"></option>
    ...
</select>

我想实现以下机制：

A）查找所有具有class="alpha"

的div

B）将divs字符串'alpha'与每个具有包含'alpha'数据属性的选择选项进行比较。

C）禁用或隐藏不包含字符串的选项。

到目前为止，我认为我需要：1）使用.alpha遍历每个div，2）获取其类，使用.filter（）将字符串与所有选项的数据属性进行匹配。

$('div.alpha').each(function() {
    var $item = $(this);
    var itemClasses = $item.attr('class');    
    $('#classSelect option').filter(function() { 
       *** CANT FIGURE OUT THIS PART ***
    });  
});

但是我无法弄清楚步骤B的逻辑或语法（主要是）。

过滤后的输出应如下所示：

<select id="classSelect">
    <option value="something" data-class="alpha"></option>
    <option value="something-2" data-class="alpha"></option>
    <option value="something-3" data-class="beta" disabled></option>
    <option value="something-4" data-class="alpha beta"></option>
    <option value="something-4" data-class="beta gamma" disabled></option>
    ...
</select>

<div class="classes">
   <div class="alpha">...</div>
   <div class="beta">....</div>
   <div class="gamma">.....</div>
   <div class="alpha beta">.....</div>
   <div class="alpha">....</div>
   <div class="beta gamma"></div>
   <div class="alpha beta gamma">.....</div>
   <div class="alpha">....</div>
   ....
</div>

有人可以给我一个提示吗？谢谢您的时间

Answer 1

要选择所有具有int且不包含任何字符串（在您的情况下为'alpha'）的选项，只需执行此操作。（只能用css完成，但是我想您的最终代码会更复杂，这就是为什么要使用jQuery的原因）。也可以使用简单的javaScript完成。

不确定为什么要选择div的第一个。也许我不正确地理解您的要求。

printf

data-class

或者您可以执行此操作（如果您由于其他原因不需要遍历选项）

var options = $("#classSelect option") $(options).each(function() { var dataClass = $(this).data('class') if ( !dataClass.includes('alpha')) { $(this).attr('disabled', true) // or hide() if you want to remove them } })

匹配来自不同列表的相同字符串

1 个答案: