JQuery цикл через текстовые вхождения

Question

Мне нужно иметь возможность циклически проходить через следующий вхождение данного текста на странице. Точно так же, как самая распространенная функция «найти» почти в каждом программном обеспечении (F3 - найти далее)

Я пытаюсь сделать это с помощью jQuery, но никак не могу заставить его работать. Пробовал: NextAll (), next (), closest () (который кажется ошибочным), find (), eq (), children () и т. Д. И т. Д. И т. Д.

Ниже приведен образец, который работает, но он переходит к последнему элементу на странице и не проходит по циклу.

function scrollMe(tow){
    var targetOffset = $("*:contains('"+tow+"'):last").offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}

Чтобы было понятно, на моей странице есть набор строк (div) с текстом внутри. Каждый раз, когда пользователь нажимает на эту строку, он должен аккуратно скатываться (или вверх) к следующей строке с появлением текста (если есть).

Образец:

<div onclick="scrollMe('hello');">hello</div>
<div onclick="scrollMe('world');">world</div>
<div onclick="scrollMe('foo');">foo</div>
<div onclick="scrollMe('hello');">hello</div>
<div onclick="scrollMe('bar');">bar</div>

Действительно, он должен быть заключен в jQuery, но это просто для иллюстрации.

Answer 1

Вот рабочий пример прокрутки до следующего вхождения и выделения его .

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

Это, например, выделит все текстовые вхождения 'two' ( пример fiddle ):

jQuery(function($) {
   var findText = 'two';
    $('*').filter(function() {
        return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0;
    }).addClass('hilite'); 
});

Чтобы это работало с какой-то функцией поиска следующей, вам понадобится переменная для отслеживания текущего индекса и какой-то триггер:

jQuery(function($) {
   // stores the currently highlighted occurence
   var index = 0;
   var findText = 'sed';

   // you could do this inside the click as well, here, it's cached/faster
   // inside click, it would be more dynamic and prevent memory leaks
   // just depends on your needs
   // you would also want to start with a parent element as $('*') is costly!
   var $occurrences = $('*').filter(function() {
       return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0;
    });

    // remove existing highlights, then find the next occurrence and highlight it
    $('#trigger').click(function() {
       if( index == $occurrences.length-1 ) { index = 0; }
       $occurrences.find('span.hilite').replaceWith(findText);
       var $next = $occurrences.eq(++index);
       $next.html( $next.html().replace(findText, '<span class="hilite">'+findText+'</span>') );
       $(document).scrollTop($next.offset().top-35);
       return false;
    });

    // scroll our trigger link when the screen moves so we can click it again
    $(window).scroll(function() {
        var top = $(window).scrollTop();
        $('#trigger').offset( {top: top, left: 0} );
    });

});

Answer 2

function ScrollMe(tow) {
    var id = 'scroll_counter_' + tow;
    var indexStr = 'index';
    var $counter = $('#' + id);
    var animationLength = 1000;
    if ($counter.length == 0) {
      $counter = $('<div></div>').attr('id', id);
      $counter.appendTo('body');
      $counter.data(indexStr, 0)
    }
    var index = $counter.data(indexStr)
    var $items = $("*:contains('"+tow+"')")
    var $item = $($items.get(index))
    $counter.data(indexStr, (index + 1) % $items.length)
    $('html,body').animate({scrollTop: $item.offset().top}, animationLength);
}

Наслаждайтесь.
Каждый вызов ScrollMe () с данной строкой находит следующее вхождение строки.
Если он вызывается с разными строками, результаты не сбрасываются (хотя их легкоbe).
Код необходимо немного изменить, чтобы он поддерживал строки, содержащие не буквенно-цифровые символы.
Я уверен, что вы будете достаточно умны, чтобы узнать, как выделить / изменить цвет выбранного элемента..

Answer 3

Хорошо, для этого вы должны использовать что-то, чтобы найти текст в таблице, а затем прокрутить до этой позиции.

Я сделал jsfiddle, чтобы показать вам, как найти верхнюю позицию ячейки таблицы, содержащей определенный текст ЗДЕСЬ

Эта скрипка предупреждает верхнюю позицию обоих слов "привет" в том порядке, в котором они появляются. Вы можете использовать break (), чтобы найти только первый.

Вы должны быть в состоянии взять это и реализовать свою собственную программу, используя что-то вроде jQuery's scrolltop (), чтобы прокрутить ваш экран до следующего слова.

Answer 4

Я не знаю, если это точно , что вы ищете, но это должно обеспечить отправную точку:

http://jsfiddle.net/massivepenguin/pnu37/18/

Я имеюдобавил форму поиска, чтобы вы могли найти конкретные слова ...