这是jQuery如何对待儿童选择器的错误？

jQuery如何处理子选择器还是错过了某些明显的东西？当孩子不是*以外的任何东西时我都无法工作。这是jQuery如何对待儿童选择器的错误？

这里是jQuery选择我运行：

$("#myTable > tr").each(function() { 
    // do somthing } 
);

而且表结构是：

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table>

无元素与上述选择#myTable > tr匹配。但下面列出的两个选择器工作正常。

$("#myTable tr") // search all descendants for tr

或使用通配符匹配孩子：

$("#myTable > *") // search all child elements

什么可能是错在这里的任何想法？

感谢您的快速答案！不幸的是只能选择一个。

来源

2010-01-16 Anurag

这是因为Firefox自动在您的tr元素周围添加了tbody元素（如果没有提供）。你真的不能使用table > tr。

您有：

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table>

但Firefox看到这个：

<table id="myTable"> 
    <tbody> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
    </tbody> 
</table>

其他因素会工作得很好：

<div> 
    <strong>Hi</strong> 
</div>

和选择：

alert($("div > strong").text()); // Alerts "Hi"

来源

2010-01-16 02:09:09

有一个隐含的<tbody>加入的元素含义而非：

<table id="myTable"> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</table>

的DOM实际上包含：

<table id="myTable"> 
<tbody> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</tbody> 
</table>

所以将其更改为：

$("#mytable > tbody > tr");

使用<tbody>，<thead>和<tfoot>表中的元素是进入的好习惯。

来源

2010-01-16 02:10:11 cletus

是的，道格的完全正确。只是为了补充他的答案，也许你知道，或者不知道，但请记住，jQuery遍历DOM，而不是发送给浏览器的HTML“文本”。

DOM是浏览器对您发送的HTML的解释。

来源

2010-01-16 02:12:56 andy

谢谢安迪。我不知道浏览器隐式添加'tbody'元素。实际上，我总是在调试这些错误时使用DOM Inspector，并且'tbody'元素一直都在这里，但不知何故，我没有看到它:) – Anurag 2010-01-16 02:18:20

这是jQuery如何对待儿童选择器的错误？

回答

相关问题