jQuery 选择器问题

Question

我有一些选项卡的信息是用车把呈现的，这是我的 HTML:

    <ul class="nav nav-tabs" id="tabsId">
        <script id="tabs-template" type="text/x-handlebars-template">
            {{#each Tabs}}
                <li data-tab-content={{Id}}><a href="#">{{Name}}</a></li>
            {{/each}}
        </script>
    </ul>
    <div id="tabsContentId">
    <script id="tabs-content-template" type="text/x-handlebars-template">
        {{#each Tabs}}
            <div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
        {{/each}}
    </script>
    </div>

现在我正在编写一个函数，当我双击任何选项卡时，它将填写我未来的表格。我只管理了如何获取 id 而我不了解如何获取名称和内容值。我尝试使用 jQuery .text() 函数，但失败了。这是我的功能：

$(function() {
    $("#tabsId").on("dblclick", "li", function(evt) {
        evt.preventDefault();
        var id = $(this).data("tabContent");
        //var name = ?
        //var content = ?
        $('#inputIndex').val(id);
        //$('#inputTitle').val(name);
        //$('#textareaContent').val(content);       
    });
});

Answer 1

不太确定你在寻找什么，但这会得到第一个 <a> 元素的内部 HTML href="#"在点击的元素内：

var name = $(this).find('a[href="#"]').first().html();

Answer 2

var id = $(this).data("tab-content");
var name = $(this).text();
// Get the content from the nth element in the other list (using the index of the LI clicked)
var content = $('#tabs-content-template .tab-content').eq($(this).index()).text();

注意：这仅适用于 LI 和选项卡 DIV 使用同一集合的情况。否则，您将需要通过 data-tab-content 属性找到它。

Answer 3

使用$(this).text()然后你可以在dbclickedli中得到名字。使用 $('#tabsContentId div[data-tab-content="' + id + '"]'); 这样您就可以获得具有属性 data-tab-content 的目标 div 并且值为您之前检索到的 id。

$(function() {
    $("#tabsId").on("dblclick", "li", function(evt) {
        evt.preventDefault();
        var id = $(this).data("tabContent");
        var name = $(this).text();
         alert("Name is :" + name);
         var targetDiv = $('div.tab-content[data-tab-content="'  + id + '"]');
         var content = targetDiv.text();
         alert("Content is :" +content);
        $('#inputIndex').val(id);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="tabsId">
           <li data-tab-content="t1"><a href="#">I'm Name</a></li>
    </ul>
    <div id="tabsContentId">
            <div class="tab-content" data-tab-content="t1">Here's content</div>
    </div>

jQuery 选择器问题

jQuery selector problems

javascript

jquery

jquery-selectors