Question

我有一个列表，其中包含带有值的li项（站点URL）和列表项内的跨域内站点的名称。我有全局变量site，siteUrl和siteName，并获取文档准备好的值。我不确定为什么，但我可以让siteUrl返回被点击列表项的值，但不返回siteName，这是span中的文本。我不确定如何在单击项目的范围内获取文本。

JS：

siteUrl = null;
$("#expList li").click(function(){
    if(this.id != 'myList'){
        siteUrl =  $(this).attr('value');
        siteName = $(this).text();
        RefreshSiteInfo();
    }else{
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        RefreshSiteInfo();
    }
    return false;
});

HTML：

    <ul id="expList" class="list"><li value="https://hosted.compulite.ca" class="collapsed expanded">
<span class="siteTitle">Sharepoint Demo Website</span>
<ul style="display: block;">
<li value="https://hosted.compulite.ca/academic" class="collapsed expanded"><span class="siteTitle">Academic</span>
<ul style="display: block;">
<li value="https://hosted.compulite.ca/academic/bm"><span class="siteTitle">Board Meetings</span></li>
<li value="https://hosted.compulite.ca/sandbox/trial"><span class="siteTitle">Trial</span></li>
</ul>
</li>
<li value="https://hosted.compulite.ca/service"><span class="siteTitle">Service</span></li>
<li value="https://hosted.compulite.ca/testing"><span class="siteTitle">DemoTesting</span></li>
<li value="https://hosted.compulite.ca/training"><span class="siteTitle">Training</span></li></ul>
</li>
</ul>

Answer 1

$(this).children('span').eq(0).text()

Answer 2

在value个容器中的li个元素上的

ul isn't a valid property。为此，您需要使用a data-* attribute并使用jQuery's data() method提取数据：

...
<li data-value="foo" class="..." ...>...</li>
...

...
siteUrl =  $(this).data('value');
...

Answer 3

由于用户只能点击<span>中的文本，您可以从传递给您的函数的事件对象中引用它：

siteUrl = null;
$("#expList li").click(function(event){
    if(this.id != 'myList'){
        siteUrl =  $(this).attr('value');
        siteName = $(event.target).text();
        RefreshSiteInfo();
    }else{
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        RefreshSiteInfo();
    }
    return false;
});

Answer 4

DEMO

HTML：

<ul id="expList" class="list">
    <li data-value="https://hosted.compulite.ca" class="collapsed expanded">
        <span class="siteTitle">Sharepoint Demo Website</span>
        <ul style="display: block;">
            <li data-value="https://hosted.compulite.ca/academic" class="collapsed expanded">
                <span class="siteTitle">Academic</span>
                <ul style="display: block;">
                    <li data-value="https://hosted.compulite.ca/academic/bm">
                        <span class="siteTitle">Board Meetings</span>
                    </li>
                    <li data-value="https://hosted.compulite.ca/sandbox/trial">
                        <span class="siteTitle">Trial</span>
                    </li>
                </ul>
            </li>
            <li data-value="https://hosted.compulite.ca/service">
                <span class="siteTitle">Service</span>
            </li>
            <li data-value="https://hosted.compulite.ca/testing">
                <span class="siteTitle">DemoTesting</span>
            </li>
            <li data-value="https://hosted.compulite.ca/training">
                <span class="siteTitle">Training</span>
            </li>
        </ul>
    </li>
</ul>

JQ：

var siteUrl  = '',
    siteName = '';

$("#expList li").click(function ( e ) {
    e.stopPropagation();
    e.preventDefault();
    siteUrl = $(this).data('value');
    siteName = $(this).text();
    alert(siteUrl+' '+siteName);
    // RefreshSiteInfo();
});

在单击列表项目的span内获取文本

4 个答案: