JQuery删除id不包含字符串的元素答案

【问题标题】：JQuery remove elements with id not containing a stringJQuery删除id不包含字符串的元素
【发布时间】：2016-04-19 21:53:27
【问题描述】：

我正在尝试在页面上实现搜索算法。

我有一个订单表，每一行都有一个订单，它有一个唯一的 ID。

每一行的<tr> 都设置了这个ID：

<tr class="searchable" id="bla_1">1</tr>
<tr class="searchable" id="bla_2">2</tr>
<tr class="searchable" id="notbla_3">3</tr>
<tr class="searchable" id="not_4">4</tr>

我想隐藏与搜索字符串不同的可搜索类的所有元素。最好不要只看开头。所以在上面的例子中，如果我的搜索字符串是“bla”，它将显示第 1、2 和 3 行。

我也希望能够在其他容器上使用相同的功能，例如 div：

<div class="searchable" id="bla_1">1</div>
<div class="searchable" id="bla_2">2</div>
<div class="searchable" id="notbla_3">3</div>
<div class="searchable" id="not_4">4</div>

我假设我需要某种 foreach 循环，但到目前为止我还没有找到如何去做。

【问题讨论】：

$(".searchable").hide(); $("[id*='bla']").show();
附带说明，ID 属性应该带来任何特定于元素的数据，如果您的 ID 没有任何其他含义（例如，如果不用于使用 URI 中的哈希对其进行标记）
附注：id 在页面范围内必须是唯一的。如果您将示例的两段代码合并在一页中，您的 html 将无效。
编辑之前的评论：ID属性不应该带来任何数据
@p.streef 你应该使用例如：data-search="bla_1"

标签： javascript jquery html search

【解决方案1】：

试试这个

var search="bla";
$('.searchable').hide();
$('.searchable[id*="' + search + '"]').show();

【讨论】：

这很好用！如果您添加一个过滤器检查 search == "" 您可以轻松地只显示空字符串的所有内容。

【解决方案2】：

您想使用属性“包含”选择器。：

$('.searchable[id*="' + searchString + '"]').show();

其中searchString 是一个变量字符串，等于您要搜索的字符串。

【讨论】：

【解决方案3】：

var search; //holds the value
if(search == ""){
  $('.searchable').show();
}else{
  $('.searchable').hide();
  $('.searchable[id*="' + search + '"]').show();
}

【讨论】：

【解决方案4】：

// Hide all elements containing bla in the id
$('.searchable[id*="bla"]').hide();
// Hide all elements not containing bla in the id
$('.searchable:not([id*="bla"])').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchable" id="bla_1">1</div>
<div class="searchable" id="bla_2">2</div>
<div class="searchable" id="notbla_3">3</div>
<div class="searchable" id="not_4">4</div>

【讨论】：