Question

我有多个像这样的容器，每个容器都有一串文字。但是，这些容器可能与另一个容器具有相同的文本字符串。

<div class="main">one</div>
<div class="main">two</div>
<div class="main">one</div>
<div class="main">three</div>
<div class="main">two</div>
<div class="main">one</div>

<button class="example" id="one">One</button>
<button class="example" id="two">Two</button>
<button class="example" id="three">Three</button>

$(".example").click(function(){
    var index = $(this).attr("id");
    $(".main").each(function(){
        var example = $(this).find(".example").text();     
        if( example.indexOf(index) >= 0 ){
          // hide every .main container that doesn't contain matching index
        }   
    });
});

对于此示例，我只想一次切换一个，并根据按钮ID仅显示所选容器。

我无法找出隐藏所有其他与索引不匹配的容器的 not 逻辑部分，而$(this)部分是＆＃39;}我很难过。

Answer 1

您可以使用更简单的代码。 :contains() select元素包含特定文本。在:not()选择器中使用它。

$(".example").click(function(){
    $(".main").show();
    $(".main:not(:contains("+ this.id +"))").hide();
});

或者在一行中显示/隐藏：

$(".example").click(function(){
    $(".main").show().filter(":not(:contains("+ this.id +"))").hide();
});

$(".example").click(function(){
  $(".main").show();
  $(".main:not(:contains("+ this.id +"))").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">one</div>
<div class="main">two</div>
<div class="main">one</div>
<div class="main">three</div>
<div class="main">two</div>
<div class="main">one</div>

<button class="example" id="one">One</button>
<button class="example" id="two">Two</button>
<button class="example" id="three">Three</button>

Answer 2

$(".main").each(function() { ... });

在每个内部，$(this)是当前元素。所以在第一次迭代中，$(this)会给你

[ <div class="main">one</div> ]

如果您使用$(this).text()，它会为您提供文字。然后，您可以将其与索引进行比较。

$(".main").each(function() {
  if ($(this).text() !== index)
    $(this).hide();
}

jQuery隐藏了与索引不匹配的容器组

2 个答案: