简单的jQuery选择器不起作用

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>包含的内容team.然后我想向上导航并从中<tr>拉id出来.

我试过了:

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

但它回来了未定义.我知道选择器是对的,因为$("span:contains(" + team + ")").attr('class')回来了classB.所以我无法弄清楚我的查询有什么问题.有人可以帮忙吗？

编辑:这是JSFiddle.

Answer 1

你html是无效的,但你的选择是正确的,你需要把tr在table标记为有效的HTML.你最好用closest("tr")而不是.parent().parent()

现场演示

<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>