时间戳

首页 > 解决方案 > 匹配来自不同列表的相同字符串

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

问题描述

我有这个 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）找到所有的divclass="alpha"

B)将 div 字符串“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>

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

标签： jquery

解决方案

要选择所有data-class不包含某些字符串的选项（在您的情况下为 'alpha' ），只需执行此操作。（只能用 css 完成，但我猜你的最终代码会更复杂，这就是你想使用 jQuery 的原因）。它也可以用普通的 javaScript 来完成。

不知道为什么要首先选择 div。也许我没有正确理解您的要求。

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
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classes">
   <div class="alpha">alpha</div>
   <div class="beta">beta</div>
   <div class="gamma">gamma</div>
   <div class="alpha beta">alpha beta</div>
   <div class="alpha">alpha</div>
   <div class="beta gamma">beta gamma</div>
   <div class="alpha beta gamma">alpha beta gamma</div>
   <div class="alpha">alpha</div>
</div>

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

或者你可以这样做（如果你因为其他原因不需要循环选项）

$("#classSelect option").not("[data-class*='alpha']").attr('disabled',true)

推荐阅读