jquery - 使用 :contains 选择器进行 jquery 搜索

Question

我正在尝试进行简单的搜索，我的目标是避免任何数据库调用，因为我只在特定列表中进行搜索。

我正在制作一个词汇表，其中所有单词都显示在一个包含更多信息的列表中。我可以以某种方式使用 :contains 选择器转到用户搜索过的单词，即：“rooftiles”

喜欢：

$("div:contains('rooftiles')");

以我的示例为例，我在搜索框中填写“rooftiles”，如果找到该单词，它将跳转到该单词 à la<a name="rooftiles">

有人可以指出我如何做到这一点的正确方向吗？

Answer 1

$('#search').on('keyup', function(e) {
    // when user press enter
    if (e.which == 13) {
        var val = $.trim(this.value);
        if (val) {
            var target = $('div:contains(' + val + ')').first();
            if (target.length) {
                var top = target.position().top;
                $('body').animate({
                    scrollTop: top
                }, 500);
            }
        }
    }
});​

演示

Answer 2

If I well understood your question maybe you could

1. find the div containing the first occurence of word
2. Get its offsetTop value
3. Make the page scroll for the given amount

Something like

function jumpToWord(word) {
    var p = ($.browser.opera)? $("html") : $("html,body"),
        d = $("div:contains('" + word + "')").eq(0),
        offset = d.offset().top;
    p.animate({ scrollTop: offset }, 1000);
}

For the sake of accuracy, if your text is contained in shorter paragraphs, it's probably better search for

$("div p:contains('" + word + "')")

Answer 3

在这种情况下，我建议：

$('a[name*="rooftiles"]');

或者 ：

$('a[name~="rooftiles"]');