如何使用jQuery获取动态分类的元素的索引 [英] How to get index of dynamically classed element with jQuery

问题描述

这些年来，我已经使用了无数的Stack Overflow解决方案，但这是我第一次发布.

I've used countless Stack Overflow solutions through the years but this is my first time posting.

我正在Wordpress网站上构建页内搜索工具，其功能类似于浏览器的查找"功能.当用户开始在搜索字段中键入内容时，匹配的字母会被一个带有绿色背景的class ="highlight"跨度包围.效果很好.

I am building an in-page search tool on a Wordpress site that functions similarly to a browser's Find feature. When the user starts typing in the search field, matched letters are surrounded by a span with class="highlight" which has a green background. This works fine.

我还希望能够迭代比赛.单击下一个"或上一个"按钮时，会将当前"添加到具有黄色背景的跨度类-class ="highlight current".每次单击下一步"按钮时，下一个匹配项将以黄色突出显示. 上一个"按钮突出显示上一个匹配项.

I also want the ability to iterate through the matches. When the Next or Previous button is clicked, the "current" is added to the span class - class="highlight current" which has a yellow background. With each click of the Next button, the next match is highlighted in yellow. The Previous button highlights the previous match.

我正在使用jQuery的.index()和.eq()方法来确定将当前"类添加到哪个匹配范围.我遇到的问题是$('.highlight').index('current')仅匹配第一次单击后的元素，而不匹配随后的单击.

I am using jQuery's .index() and .eq() methods to determine which matched span to add the "current" class to. The problem I'm having is $('.highlight').index('current') only matches elements as they are after the first click and not after subsequent clicks.

这是我代码的相关部分:

Here is the pertinent part of my code:

$('.search-btn').click(function (e) {
    e.preventDefault();
    var total_matches = [];
    $('.highlight').each(function() {
        total_matches.push(this);
    });
    console.log(total_matches.length);//total number of matched terms on the page

    var current_selected = $('.highlight').index('current');
    //term currently highlighted in yellow, -1 if nothing is highlighted.
    //It ALWAYS returns -1, which is the problem    

    if( $(this).hasClass( 'search-next') ) {//click Next button
        if(current_selected === -1) {//nothing currently selected
            $( $('.highlight').eq(0) ).addClass('current');//highlight first element
        }else{//something already selected
            current_selected = (current_selected+1) % all_matches.length;
            $( $('.highlight').eq(current_selected) ).addClass('current');
        }
    }
    //something similar for the search-prev button....
});

我缺少与动态添加和删除当前"类有关的东西，但我无法弄清楚.

I'm missing something having to do with the "current" class being dynamically added and removed but I can't figure it out.

推荐答案

如果current是一门课，那么您需要在句号前加一个

If current is a class then you will need to prepend a period.

在没有句号的情况下，它正在寻找<current></current>选择器的索引而不是<anything class="current"></anything>

Without the period, it is looking for the index of a <current></current> selector instead of <anything class="current"></anything>

因此，尝试替换此: var current_selected = $('.highlight').index('current');

So try replacing this: var current_selected = $('.highlight').index('current');

与此: var current_selected = $('.highlight').index('.current');

我还注意到您在某些功能上将jQuery双重包装了$( $('element') )是不必要的.

I also noticed you were double wrapping jQuery on certain functions $( $('element') ) is not necessary.

最后，如果您从不使用total_matches，则无需循环即可获得$('.highlight')的长度.

Lastly, if you don't ever use total_matches you could get the length of $('.highlight') without looping through it.

$('.search-btn').click(function (e) {
    e.preventDefault();
    var total_matches = $('.highlight').length; // shorter than looping through

    console.log(total_matches);//total number of matched terms on the page

    var current_selected = $('.highlight').index('.current'); // fix is here

    if(! $(this).hasClass( 'search-next') ) return; // I find this easier than indenting everything below

    if (current_selected === -1) {//nothing currently selected
        $('.highlight').eq(0).addClass('current');//highlight first element             
    } else {//something already selected
        current_selected = (current_selected+1) % total_matchces;
        $('.highlight').eq(current_selected).addClass('current');
    }
    //something similar for the search-prev button....
});

这篇关于如何使用jQuery获取动态分类的元素的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！