使用jQuery獲取跨度內的特定文本

Question

以下是生成的動態表的示例td。 我需要遍歷tds以匹配'Data'值，並檢查是否填充了其對應的'Result'值。

如果未填充'Result' ，則不會有span class="taglist"元素。

<td class="indent0"> 
    Data1 
    <span class="aspect-data"> 
        <span class="taglist">Result1</span> 
    </span>
<td class="indent0"> 
    Data2 
    <span class="aspect-data"> 
        <span class="taglist">Result2</span> 
    </span>

我嘗試使用下面的代碼進行迭代，該代碼將警告所有'Result'值，但我只需要獲取給定的'Data'的相應值。

$('.indent0').each(function() {
    var celltext = $(this).html();  
    if (celltext = "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

Answer 1

您遇到的問題是DataX沒有包裝在特定元素中，因此您需要獲取文本節點，並根據所需的值檢查該文本的文本值。

另外請注意，您使用=設置值而不是==來比較if條件中的值，並且HTML缺少一些</td>標記。 嘗試這個：

$('.indent0').each(function() {
    var celltext = $(this).contents()[0].nodeValue.trim();
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }
});

工作實例

Answer 2

嘗試使用內容

$('.indent0').each(function() {
    var celltext = $(this).contents().first()[0].textContent;  //this line has changed
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

要么

$('.indent0').each(function() {
    var celltext = $(this).contents()[0].nodeValue;  //this line has changed
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

Answer 3

您可以使用startsWith()如下所示。

 $('.indent0').each(function () { var celltext = $(this).text().trim(); // change here if (celltext.startsWith("Data1")) { // change here var spantext = $(this).find(".taglist").html(); if (spantext != null) { alert(spantext); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="indent0"> Data1 <span class="aspect-data"> <span class="taglist">Result1</span> </span> </td> <td class="indent0"> Data2 <span class="aspect-data"> <span class="taglist">Result2</span> </span> </td> </tr> </table>