Question

我最近不得不编写代码来搜索页面中与标题相关的字段的值。 HTML结构采用以下形式：

＆＃13;

    <table><tr>
    ...etc...
    <td><div><span>Type of Fruit:</span></div></td>
    <td><span><div><span><div>Orange</div></span></div></span></td>
    ...etc...
    </tr></table>

＆＃13;

我用以下jQuery解决了这个问题：

＆＃13;

    var strFruitType = $('span').filter(function(){ 
          return $(this).text() === 'Type of Fruit:';
    }).closest('td').next().find(':last').text().trim();

    //Evaluate Fruit Type.
    switch(strFruitType) {
    ...etc...

＆＃13;

这是找到下一个兄弟的最后一个元素的最直接或最有效的方法吗？

Answer 1

如果你无法控制HTML，你看起来很不错。只是几件事：

如果搜索包含“水果类型：”的字符串，则可以：

$('span:contains("Type of Fruit:")').closest('td').next().find(':last').text().trim();

您甚至可以缩短为：

$('td:contains("Type of Fruit:")').next().find(':last').text().trim();

此外，我不确定您的示例有多简化，但看起来您可能正在使用:last在同级td元素中查找最深元素。但:last确实找到了最后一个直接的孩子。因此，如果您的td可能有多个这样的直接孩子：

<td>
    <span><div><span><div>Orange</div></span></div></span>
    <span><div><span><div>Apple</div></span></div></span>
</td>

你最终会选择“Apple”，但这是因为:last直接在span内找到了第二个td。因此，如果您的td只有一个直接孩子，那么您就不需要:last。

这给我们留下了：

$('td:contains("Type of Fruit:")').next().text().trim();

jQuery选择器下一个兄弟的最后一个元素

1 个答案: