Question

我想使用jScrollPane的scrollToElement（API link）滚动到div的最近实例。

我试图使用jQuery的$(this)和closest()来形成将传递给scrollToElement的变量。

但我认为$(this)的实现不正确或者这样的变量不是可接受的参数类型，因为它不会触发滚动操作。

错误消息是：

未捕获的TypeError：无法读取未定义的属性“top”

如何使用$(this)和closest()来形成传递给scrollToElement的变量？

的jsfiddle

包括工作和非工作参数的示例：

http://jsfiddle.net/rwone/bUbm8/

HTML

<div id="main_content">
    <div class="click_me">CLICK ME</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <a class="target">target</a>
</div>

的jQuery

function initScrollPane(){
    var jScrollPaneSettings = {
        hijackInternalLinks: true,
        animateScroll: true,
        animateDuration: 600,
        contentWidth: '0px'
    };
    var mainContent = $('#main_content')
    mainContent.jScrollPane(jScrollPaneSettings);
    var apiMainContent = mainContent.data('jsp');
    apiMainContent.reinitialise();

    $(document).on("click",".click_me", function(e) {
        e.preventDefault();  
        // DOESN"T work
        // var myVar = $(this).closest(".target");
        // DOES work
        var myVar = $(".target:first");
        //apiMainContent.scrollToElement(".target");    
        apiMainContent.scrollToElement(myVar);
    });
}

initScrollPane();

修改

我的理解是closest()可以搜索down树，这就是我按照以下链接使用该特定方法的原因，但也许这种理解是错误的：

https://stackoverflow.com/a/5139438/1063287

Answer 1

你错误地使用closest()。 closest()获取最接近的parents()。在您的情况下，有两种方法可以做。

首先是：

var myVar = $(this).siblings(".target");

第二是

var myVar = $(this).parent().find('.target');

Answer 2

你不能使用closest()，因为它“通过测试元素本身并遍历DOM树中的祖先来运行”。（Documentation）

如果您有多个目标，则需要使用siblings()（Documentation），然后搜索最近的一个。有关如何执行此操作的示例，请参阅此answer。

如何使用$（this）和nearest（）来形成传递给jScrollPane的scrollToElement的变量？

2 个答案: