Question

我正在尝试解析这个HTML：

<tr id="a">
    <td class="classA">
        <span class="classB">Toronto</span>
    </td>
    <td class="classC">
        <span class="classD">Winnipeg</span>
    </td>
</tr>
<tr id="b">
    <td class="classA">
        <span class="classB">Montreal</span>
    </td>
    <td class="classC">
        <span class="classD">Calgary</span>
    </td>
</tr>

我有一个变量team。我想找到包含<span>的{{1}}。然后，我想向上导航到team并从中提取<tr>。

我试过了：

id

但它回来了未定义。我知道选择器是正确的，因为var team = "Toronto"; var id = $("span:contains(" + team + ")").parent().parent().attr('id');带有$("span:contains(" + team + ")").attr('class')。所以我无法弄清楚我的查询有什么问题。有人可以帮忙吗？

编辑：这是JSFiddle.

Answer 1

您的html 无效但您的选择器是正确的，您需要将tr放在table标记中以获取有效的HTML 。最好使用closest("tr")代替.parent().parent()

Live Demo

<table>
    <tr id="a">
        <td class="classA"> <span class="classB">Toronto</span>

        </td>
        <td class="classC"> <span class="classD">Winnipeg</span>

        </td>
    </tr>
    <tr id="b">
        <td class="classA"> <span class="classB">Montreal</span>

        </td>
        <td class="classC"> <span class="classD">Calgary</span>

        </td>
    </tr>
</table>

Answer 2

这不起作用，因为浏览器会自动修复您的HTML。如果没有桌子，你就不能拥有TR，所以它只是扔掉它。在JavaScript运行时，所有这些实际上都是DOM的一部分。

将其包裹在<table>中，您的代码就可以使用了。甚至更好地将它包装在<table><tbody>中，因为浏览器仍然只需要一个桌子和一个桌子就可以为你制作一个tbody。这可能会引起混淆（如果你看看TR的父母）。

Answer 3

目前您的HTML标记无效，您需要在<tr>中包含<table>元素：

<table>
    <tr id="a">
        <td class="classA"> <span class="classB">Toronto</span>

        </td>
        <td class="classC"> <span class="classD">Winnipeg</span>

        </td>
    </tr>
    <tr id="b">
        <td class="classA"> <span class="classB">Montreal</span>

        </td>
        <td class="classC"> <span class="classD">Calgary</span>

        </td>
    </tr>
</table>

此外，最好使用.closest()以及.prop()代替.parent()和.attr()

var id = $("span:contains(" + team + ")").closest('tr').prop('id');

<强> Fiddle Demo

Answer 4

尝试：

var id = $("span:contains(" + team + ")").parent('td').parent('tr').attr('id');

Answer 5

您的代码效果很好。只需将代码打包到<table></table>

即可

HTML

<table>
<tr id="a">
    <td class="classA">
        <span class="classB">Toronto</span>
    </td>
    <td class="classC">
        <span class="classD">Winnipeg</span>
    </td>
</tr>
<tr id="b">
    <td class="classA">
        <span class="classB">Montreal</span>
    </td>
    <td class="classC">
        <span class="classD">Calgary</span>
    </td>
</tr>
</table>

脚本

var team = "Toronto";
var id = $("span:contains(" + team + ")").closest('tr').prop('id');
console.log(id)

http://jsfiddle.net/7Eh7L/

更好地使用closest()

$("span:contains(" + team + ")").closest('tr').prop('id');

简单的jQuery选择器不起作用

5 个答案: