Как переключить только элемент с кликом при использовании сценариев jsrender?

Question

Это мой HTML код:

<li> 
    <div class="search-res-title clearfix"> 
      <h3> <a href="food-details.html?item={{>_source.name}}" > {{>_source.name}}</a> </h3> <span><i class="badge">{{>_source.items.length}}</i>Places</span> 
      </div> 

     <ul class="sr-itemlist"> 
     {{for _source.items}} 
       <li> <a href="restaurant-page.html?restaurant={{>hotelDetails.key}}" > {{>hotelDetails.name}}</a> <i class="badge">{{>hotelDetails.misc.rating}}</i> </li> 
     {{if #index ==2}} 
     </ul> 
     <div class="item-serh-more test{{:#index}} extra-list clearfix" > 
      <ul class="sr-itemlist"> 
     {{/if}} 
     {{/for}} 
      </ul> 
     {{if _source.items.length >=2 }} 
     </div> 
     {{/if}} 
     <a href="#" class="loc-showbtn" refVal="{{:#index}}">more<span class="caret"></span></a> 
    </li> 
</script> 

Теперь это мой JQuery код

var showMore = function() { 
$('body').on('click', '.loc-showbtn', function() { 
    $('.item-serh-more').toggle(); 
    }); 
    }; 

Что я хочу: Когда я нажимаю ".loc-showbtn" я хочу отдельного элемента открыть.

Что происходит сейчас: Когда я нажимаю ".loc-showbtn", все элементы с классом "$('.item-serh-more').toggle();" открывает

Я попытался дать порядковый номер цикла jsrender к классу ".item-serh-more" Но, кажется, нет.. рабочий.

Answer 1

Подразделение, требуемое для переключения, является предыдущим братом щелкнутого якоря. Вы можете просто использовать .prev() с Clicked элементами контекста this целевым его:

$('body').on('click', '.loc-showbtn', function() { 
    $(this).prev().toggle(); 
}); 

Answer 2

проблема заключается в селекторе $('.item-serh-more') используется в обработчике щелчка, он выбирает все элементы с классом item-serh-more но то, что вам нужно, это item-serh-more элемента, который предыдущие родственный нажатой loc-showbtn элемент.

var showMore = function() { 
    $('body').on('click', '.loc-showbtn', function() { 
     $(this).prev('.item-serh-more').toggle(); 
    }); 
};