.child()返回第二级项目

我认为。child()函数是我的问题…但我不确定这个。

在html

中

<div class="tabs" data-name="1st level tabs">
    <ul class="nav">
        <li><a href="#">1st level link</a></li>
        <li><a href="#">1st level link</a></li>
    </ul>
    <ul class="content">
        <li>
        1st TEXT
        <div class="tabs" data-name="2st level tabs">
            <ul class="nav">
                <li><a href="#">2nd level link</a></li>
                <li><a href="#">2nd level link</a></li>
            </ul>
            <ul class="content">
            </ul>
        </div>
        </li>
        <li>1st TEXT</li>
    </ul>
</div>

类"tabs"的一个元素在另一个元素中…好吧;JS:

$(function($) {
    var Tabs = function(element,options){
        self = this;
        self.$element = element;

        self.testdrive = function (){
            console.log(self.$element.attr("data-name"));
        }
        self.$element.children(".nav").children("li").children("a").click(function(e){
            e.preventDefault();
            //Returns EVER 2nd level
            self.testdrive();
            //Triggering directly a Tabs instance returns EVER 2nd level
            $(this).closest(".tabs").data("test.tabs").testdrive();
        });
    }
    //JQuery plugin
    $.fn.tabs = function () {
        return this.each(function () {
            var $this = $(this);
            var data  = $this.data('test.tabs');
            //Creating only one instance of Tabs
            if(!data){
                data = new Tabs($this);
                $this.data('test.tabs',data);
            }
        });
    }
    //Adding tabs plugin to all ".tabs"
    $(function() {
        $('.tabs').each(function(){
            $(this).tabs();
        });
    });
}( jQuery ));

当$(element). Tabs()被调用时，在数据属性test.tabs中创建一个函数Tabs的实例。如果测试。tab已定义，只使用旧实例来保存它。

为了测试它，我创建了一个名为testdrive的函数，当.tabs>时在控制台中打印"data-name"属性。导航>li>a已被点击

代码工作，但是，在控制台我收到"2st级标签"，如果我点击第一级项目。child()函数有问题吗?我的代码有问题吗?

var self = this;

$(this).closest(".tabs").data("test.tabs").testdrive();