获取单击的列表项的范围内的文本

Get text inside span on clicked list item

本文关键字：范围内 文本 列表 单击 获取      更新时间：2023-09-26

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

.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>

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

value不是ul容器中li元素的有效属性。为此，您需要使用 data-* 属性并使用 jQuery 的 data() 方法提取数据：

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

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

由于用户只能单击<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;
});

演示

.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();
});
相关文章：