2

对于 Google Chrome 插件，我试图滚动到包含给定字符串的 DOM 元素。但是，在过滤了一个选择器之后，我有点迷失在 DOM 中。

$('*', 'body')
    .andSelf()
    .contents()
    .filter(function(){                     
        return this.nodeType === 3;
    })
    .filter(function(){
        // Only match when contains given string anywhere in the text       

        if(this.nodeValue.indexOf(givenString != -1){
            //idArr.push(this.offsetLeft);

            var ele = $(this);
                       $('html, body').animate({
                    scrollTop: ele.offset().top
                     }, 2000);                              
                return true;
            }

            return false;

    });

每当我尝试获取 的顶部偏移量时ele，我都会得到滚动条相对于文档的顶部偏移量。有任何想法吗？我认为这可能是我$this在过滤器内部使用的范围问题，但this在过滤器内部应该引用当前的 DOM 元素。

编辑：

通过调用

var ele=$(this.parentNode);

我能够获得包含文本节点的元素

4

2 回答 2

2

尝试这个：

var matches = $('body, body *').
        addBack().
        contents().
        filter(function(){                     
            return this.nodeType === 3;
        }).
        filter(function(){
        // Only match when contains given string anywhere in the text               
             if(this.nodeValue.indexOf(givenString) != -1)
               return true;
        }).first();

基本上与您进行的过滤相同（我只是添加了一个缺少的括号）。这将为您提供与您的字符串匹配的第一个（如果有的话）文本节点。但是由于您无法直接在 DOM 中获取 textnodes 位置（请参阅此问题），您可能想尝试一个简单的技巧，将其包装在 span 元素中，然后检索偏移量以滚动页面：

if(matches.length > 0){
    var offset = $(matches).wrap('<span>').parent().offset().top;
    $('html, body').animate({scrollTop: offset}, 'slow');
}

小提琴示例在这里

于 2013-07-02T05:46:58.137 回答
0 
el = $(":not(html, body, div, table, tbody, tr):contains('" + givenString + "')")

这将返回匹配的元素。然后你可以滚动到元素

于 2013-07-02T06:46:19.393 回答