javascript - 在表格单元格中查找单词，然后从下一个单元格中提取文本

Question

请看这个 Fiddle example 。我正在使用 ajax 脚本来解析 JSON 文件。 JSON 文件中的一项(B 项)在其表格中包含单词“Sodium”，我可以使用此脚本打印表格:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
         var title = item.title;
         var table = item.table; 
            if (table.indexOf("Sodium") >= 0){
         $('.'+ title+'table').html(''+table+'')
            }
        });
    },
    error: function () {}
});

既然它能在表中找到“钠”这个词，我想知道是否有可能找到哪个 td这个词在然后找到它的下一个最接近的 td提取钠量，在本例中为 1200 mg ？会像.closest('td').text();吗？工作？但是如何选择选择器呢？

JSON 文件

[{"title":"A","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>235mg<\/td><td>6<\/td><\/tr><tr><td>Omega 6<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin B<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"},{"title":"B","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>245mg<\/td><td>6<\/td><\/tr><tr><td>Fish Oil<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Sodium (from Kitchen Salt)<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"}]

表结构:

<table class="tablesorter">
<thead>
<tr>
<td>Ingredient</td>
<td>Amount</td>
<td>% Daily Value**</td>
</tr>
</thead>
<tbody>
<tr>
<td>Calories</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Total Carbohydrate</td>
<td>2g</td>
<td>&lt;1</td>
</tr>
<tr>
<td>Vitamin C</td>
<td>110mg</td>
<td>4</td>
</tr>
<tr>  //************************
<td>Sodium (from Kitchen Salt)</td>
<td>1200mg</td>
<td>6</td>
</tr>  //*************************
<tr>
<td>Omega 6</td>
<td>1100mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin B</td>
<td>1200mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin E</td>
<td>300mg</td>
<td>*</td>
</tr>
</tbody>
</table>

Answer 1

您可以使用 jQuery :contains() 选择器简单地搜索已解析的 HTML:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
            var title = item.title;
            var table = item.table; 
            if (table.indexOf("Sodium") >= 0) {
                $('.'+ title+'table').html(''+table+'');
                alert($('.'+title+'table').find('td:contains(Sodium)').next().html());
            }
        });
    },
    error: function () {}
});

Demo .

该警报调用将在其文本中包含 Sodium 的内容之后提醒 td 的内容。