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

【问题标题】：jquery search with :contains selector使用 :contains 选择器进行 jquery 搜索
【发布时间】：2012-08-29 00:30:05
【问题描述】：

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

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

喜欢：

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

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

有人可以为我指出正确的方向吗？

【问题讨论】：

明确关于 searchbox/ anchor 和 div 的歧义。发布一些HTML。

标签： jquery database search anchor contains

【解决方案1】：

在这种情况下，我建议：

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

或者：

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

【讨论】：

【解决方案2】：

如果我很好理解你的问题，也许你可以

找到包含word第一次出现的div
获取其offsetTop 值
让页面滚动给定数量

类似

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);
}

为了准确起见，如果您的文本包含在较短的段落中，最好搜索

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

【讨论】：

【解决方案3】：

$('#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);
            }
        }
    }
});

Demo

【讨论】：

这正是我想要的！发现！谢谢你:)
关于这个的一个问题 - 我怎样才能让它选择我的名为“word-header”的 div 类，它位于 div ("#all-words-box") 和 (".word-内容框）。当我只是做 $('div.word-header:contains(' + val + ')').first(); 它不会滚动到单词标题。
@MortenHagh 它不应该发生......如果可能的话，请做一个小提琴并分享链接