簡單的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選擇不工作

回答

相關問題