简单的jQuery选择不工作

我试图解析这个HTML：简单的jQuery选择不工作

<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。所以我无法弄清楚我的查询有什么问题。谁能帮忙？

编辑：这里是JSFiddle.

来源

2014-03-19 aquemini

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

来源

2014-03-19 05:49:38 Adil

目前你的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

来源

2014-03-19 05:51:00 Felix

尝试：

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

来源

2014-03-19 05:51:03 goseo

你的代码工作good.Just包装你的代码到<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');

来源

2014-03-19 05:52:15

它不工作监守浏览器的自动修复你的HTML。你不能没有桌子的TR，所以它只是扔掉它。当JavaScript运行的时候，所有这些都是DOM的一部分。

将它包装在一个<table>中，您的代码将工作。甚至更好的包装它在<table><tbody>，因为浏览器将仍然只是一个表&可能会导致下一个混乱（如果你看看TR的父母）你的tbody。

来源

2014-03-19 05:54:19 fyjham

简单的jQuery选择不工作

回答

相关问题