我可以依赖于< tbody>标签的隐式创建吗? [英] Can I rely on the implicit creation of the `<tbody>` tag?
问题描述
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
$( "table > tr > td > input[id]" ).each( function( i, element ){
alert( $( element ).attr( 'id' ) )
});
});
</script>
</head>
<body>
<form>
<table>
<tr><td>City:</td><td><input type="text" id="city" name="city" /></td></tr>
<tr><td>state:</td><td><input type="text" id="state" name="state" /></td></tr>
</table><br />
<input type="submit" value="OK"/>
</form>
</body>
</html>
当我以这种方式编写代码时，它无法正常工作，因为我的浏览器会自动创建一个<tbody>标签.所以我必须写:
When I write it this way, it doesn’t work because my browser automatically creates a <tbody> tag. So I have to write:
$( "table tr > td > input[id]" ).each( function( i, element ){
alert( $( element ).attr( 'id' ) )
});
或:
$( "table > tbody > tr > td > input[id]" ).each( function( i, element ){
alert( $( element ).attr( 'id' ) )
});
我可以依靠<tbody>标记的隐式创建，还是不应该依靠它?
Can I rely on the implicit creation of the <tbody> tag, or should I not count on that?
添加了内容，以解释我对蒂姆·唐恩答案的评论:
added to explain my comment to Tim Down’s answer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var ids = [];
var form = document.forms[0];
var formEls = form.elements;
var f_len = formEls.length;
for ( var i = 0; i < f_len; ++i ) {
ids.push( formEls[i].id );
}
var data = [ [ 'one', 'two', 'thre' ], [ 'four', 'five', 'six' ] ];
var ids_len = ids.length;
for ( i = 0; i < ids_len; i++ ){
$( "#" + ids[i] ).autocomplete({
source: data[i]
});
}
});
</script>
</head>
<body>
<form>
<table>
<tr><td>A:</td><td><input type="text" id="a" name="a" /></td></tr>
<tr><td>B:</td><td><input type="text" id="b" name="b" /></td></tr>
</table><br />
<input type="submit" value="OK"/>
</form>
</body>
</html>
运行此命令时，Web控制台会向我显示如下警告:Empty string to getElementById() is passed. form.elements返回的字符串之一为空.
When I run this, the web console shows me a warning like this: Empty string to getElementById() is passed. One of the strings returned by form.elements is empty.
推荐答案
这不是依靠它是否自动创建的问题.
It's not a question on relying on it being automatically created or not.
问题是它是否是强制性的.
The question is if it's mandatory or not.
根据HTML5草案:
如果第一个元素在内部，则可以省略tbody元素的开始标签 tbody元素是tr元素，如果元素不是 紧接其结束标记的tbody thead或tfoot元素之前 已被省略.
A tbody element's start tag may be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody thead, or tfoot element whose end tag has been omitted.
如果tbody元素是 紧随其后的是"tbody"或"tfoot"元素，或者如果没有 父元素中包含更多内容.
A tbody element’s end tag may be omitted if the tbody element is immediately followed by a tbody or tfoot element, or if there is no more content in the parent element.
因此，如果您的代码满足上述条件，则实际上可以忽略它，否则是必需的.
So you can actually omit it if your code met the above conditions, otherwise it is needed.
正如其他人指出的那样，即使需要它，并且html解析器也找不到它(因为您没有编写它)，它会为您插入DOM中，如html5规范所述.
As other people pointed out, even if it is needed, and the html parser won't find it because you didn't write it, it will be inserted into the DOM for you, as stated in the html5 specs.
根据经验，从不依赖任何人为您自动创建东西！(请参见下文)
This said, as a rule of thumb, never rely on anyone creating something automatically for you! (see below)
因此，即使浏览器会为您创建它，也不意味着较新的浏览器或同一浏览器的新版本将以相同的方式运行，然后您的代码可能会损坏.
So even if the browser will create it for you, this doesn't mean newer browsers or new version of the same browser will follow the same way, and your code may become broken then.
此外，您的JS可以进行优化.
Also, your JS could be optimized.
$( document ).ready( function(){
$( "td > input[id]" ).each( function( i, element ){
alert( element.id );
});
});
-
总是在语句末尾写分号. 不要依赖JS引擎为您编写它们！(请参见上文).
无需调用jQuery函数并在元素之外创建jQuery对象，只需调用attr()方法即可获取ID. JavaScript已经具有id()方法来检索ID.
No need to call the jQuery function and create a jQuery object out of element just to call the attr() method to get the id. JavaScript already has the id() method to retrieve the id.
如果您的实际标记类似于您在答案中发布的标记，则可以这样编写jQuery选择器:table input[id].或者，如果您有嵌套表td > input[id]，如建议的gilly3.
If your actual markup is like the one you posted in your answer, you could write the jQuery selector like this: table input[id]. Or, if you have nested tables td > input[id] like gilly3 suggested.
这篇关于我可以依赖于< tbody>标签的隐式创建吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
