Question

我正在编写一个页面内搜索工具，其功能与浏览器的查找功能类似。当用户开始在搜索字段中键入时，匹配的字母被具有绿色背景的class="highlight"的跨度包围。这很好。

我还希望能够迭代匹配。单击“下一个”或“上一个”按钮时，“当前”类将添加到范围类 - class="highlight current"，其背景为黄色。每次单击“下一步”按钮，下一个匹配将以黄色突出显示。上一个按钮突出显示上一个匹配。

代码：

$('.search-btn').click(function (e) {
    e.preventDefault();
    var total_matches = $('.highlight').length;

    var current_selected = $('.highlight').index('.current');
    //index of term currently highlighted in yellow, -1 if nothing is highlighted.

    if( $(this).hasClass( 'search-next') ) {//Next button has been clicked
        var select_me_next = (current_selected+1) % total_matches;
        $('.highlight').eq(select_me_next).addClass('current');
        $('.highlight').eq(current_selected).removeClass('current');
    }
    if( $(this).hasClass( 'search-prev') ) {
    //something similar for the search-prev button....
    }
});

首次点击，current_selected = -1，这是正确的在第二次单击时，current_selected = 0，这是正确的在第三次单击时，再次current_selected = -1，应为1.为什么??

Answer 1

您未正确使用.index。当参数是选择器时，它指示要搜索您应用它的对象的集合，因此$('.highlight').index('.current')表示在.highlight集合中查找.current的位置。这与你想要的相反。

您应该使用$('.current').index('.highlight')或$('.highlight').index($('.current'))（当参数是对象而不是选择器时，它是查找位置的元素。）

要删除旧的所选元素，请使用$('.highlight.current')而不是.eq(current_selected)。原因是当current_selected为负时，.eq()从结尾开始计数，这会从错误的元素中删除该类。

＆＃13;

$('.search-btn').click(function(e) {
  e.preventDefault();
  var total_matches = $('.highlight').length;

  var current_selected = $('.current').index('.highlight');
  //index of term currently highlighted in yellow, -1 if nothing is highlighted.

  if ($(this).hasClass('search-next')) { //Next button has been clicked
    var select_me_next = (current_selected + 1) % total_matches;
  } else if ($(this).hasClass('search-prev')) {
    select_me_next = current_selected - 1;
    if (select_me_next < 0) {
      select_me_next = total_matches - 1;
    }
  }

  $('.highlight.current').removeClass('current');
  $('.highlight').eq(select_me_next).addClass('current');
});

＆＃13;

.highlight {
  background-color: green;
}
.highlight.current {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="highlight">Item 1</li>
  <li class="highlight">Item 2</li>
  <li class="highlight">Item 3</li>
</ul>

<button class="search-btn search-next">
  Next
</button>
<button class="search-btn search-prev">
  Prev
</button>
<div id="which"></div>

＆＃13;

Answer 2

我从未使用.index()方法中传递的选择器。相反，我做过类似的事情。

var index = -1;
$('.highlight').each(function(i){
   if($(this).hasClass('current')){
      index = i;
   };
});

这会返回正确的结果吗？

jQuery index（）返回意外结果

2 个答案: