Блог

У меня есть несколько подобных контейнеров, в каждом из которых есть строка текста. Однако эти контейнеры могут содержать ту же строку текста, что и другие.

 <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
        }   
    });
});
  

В этом примере я просто хочу переключать по одному и показывать только выбранный контейнер на основе идентификатора кнопки.

У меня возникли проблемы с разработкой не логической части скрытия всех других контейнеров, которые не соответствуют индексу, это та $(this) часть, которая ставит меня в тупик.

Вы можете использовать более простой код. :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>  

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

Внутри каждого $(this) находится текущий элемент. Итак, на первой итерации $(this) вы получите

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

Если вы используете $(this).text() его, он выдаст вам текст. Затем вы можете сравнить это с вашим индексом.

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