选择包含隐藏 <span> 值的 <li> 值

Question

我有以下代码：

<div id="left">
    <ul class="cmdSelected">
        <li class="cmdTitle">Test Case D</li>
            <li class="cmdTypeE">GPP1<span hidden>143</span></li>
            <li class="cmdTypeE">GPP2<span hidden>146</span></li>               
            <li class="cmdTypeF">UDA<span hidden>0</span></li>
            <li class="cmdTypeB">Complete<span hidden>1</span></li>
    </ul>
</div>

我想在单击时显示值“GPP1”。

$( "li.cmdTypeE" ).on("click", function() {
    var selected = $(this).text();   //Can't work properly
});

但是，它将显示值“GPP1143”。 我该怎么做才能只获取值“GPP1”？

Answer 1

替换这个：-

 var selected = $(this).text(); 

有：-

var selected = $("#left >ul").find("li:selected").clone().children().remove().end().text();

或

var selected = $(this).clone().children().remove().end().text();

.clone() -- 克隆元素。
.children() -- 选择所有的孩子。
.remove() -- 删除所有子节点。
.end() -- 再次返回选中的元素。

Answer 2

试试下面的代码：

<div id="left">
    <ul class="cmdSelected">
        <li class="cmdTitle">Test Case D</li>
            <li class="cmdTypeE">GPP1<span hidden>143</span></li>
            <li class="cmdTypeE">GPP2<span hidden>146</span></li>               
            <li class="cmdTypeF">UDA<span hidden>0</span></li>
            <li class="cmdTypeB">Complete<span hidden>1</span></li>
    </ul>
</div>

JS：

$(document).ready(function() {
$( "li.cmdTypeE" ).on("click", function() {
    var selected = $(this).contents().filter(function() { return this.nodeType == 3; }).text();
    console.log(selected);
    });
});

JSFiddle：https://jsfiddle.net/Lxs210La/

基于：https://stackoverflow.com/a/5915443/814110

Answer 3

试试这个：

<div id="left">
<ul class="cmdSelected">
    <li class="cmdTitle">Test Case D</li>
        <li class="cmdTypeE" onclick="clickonthis(this)">GPP1<span hidden>143</span></li>
        <li class="cmdTypeE" onclick="clickonthis(this)">GPP2<span hidden>146</span></li>               
        <li class="cmdTypeF" onclick="clickonthis(this)">UDA<span hidden>0</span></li>
        <li class="cmdTypeB" onclick="clickonthis(this)">Complete<span hidden>1</span></li>
</ul>

关于脚本：

function clickonthis(obj) {
    var selected = $(obj).text();
    alert(selected);  
}