簡單的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 。 我想找到包含team的<span> 。 然后，我想導航到<tr>並從中提取id 。

我試過了：

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

但是它回來時沒有定義。 我知道選擇器是正確的，因為$("span:contains(" + team + ")").attr('class')隨classB一起classB 。 所以我不知道我的查詢出了什么問題。 有人可以幫忙嗎？

編輯：這是JSFiddle。

Answer 1

您的html 無效，但選擇器正確 ，您需要在table標簽中添加tr以獲得有效的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>

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');

小提琴演示

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');