sid*_*com 14 html javascript jquery dom
<!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>标记.所以我要写:
$( "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>标记,还是我不应该依赖它？
编辑:添加解释我对Tim Down的答案的评论:
<!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为空.
这不是一个依赖于自动创建的问题.
问题是它是否是强制性的.
根据HTML5草案:
如果tbody元素中的第一个元素是tr元素,并且元素不是紧跟tbody thead,或者tby元素的结尾标记被省略,则可以省略tbody元素的开始标记.
如果tbody元素后面紧跟tbody或tfoot元素,或者如果父元素中没有更多内容,则可以省略tbody元素的结束标记.
因此,如果您的代码满足上述条件,您实际上可以省略它,否则就需要它.
正如其他人所指出的那样,即使它是需要的,并且html解析器因为你没有写它而找不到它,它将被插入到DOM中,如html5规范中所述.
这说,作为一个经验法则,永远不要依赖任何人为你自动创造的东西!(见下文)
因此,即使浏览器会为您创建,这并不意味着较新的浏览器或相同浏览器的新版本将遵循相同的方式,并且您的代码可能会破坏.
此外,您的JS可以进行优化.
$( document ).ready( function(){
$( "td > input[id]" ).each( function( i, element ){
alert( element.id );
});
});
始终在语句结尾处写分号.不要依赖JS引擎为你编写它们!(往上看).
无需调用jQuery函数并从元素中创建jQuery对象只是为了调用attr()方法来获取id.JavaScript已经有了id()检索id 的方法.
如果您的实际标记与您在答案中发布的标记类似,您可以像这样编写jQuery选择器:table input[id].或者,如果你有td > input[id]像gilly3建议的嵌套表.
我不同意@spike 的回答，至少如果我们谈论普通的 HTML 解析（不使用innerHTML）。Everytr成为隐式创建的子项，tbody除非它已经是另一个thead,tbody或的子项tfoot。jQuery.support.tbody用于使用innerHTML或可能是其他 DOM 方法创建的表。如果<tbody>在标记中省略，它总是被插入。
该tbody元素不是可选的，它只是具有可选的开始和结束标记。怀疑隐式tbody创建与怀疑html或body元素的隐式创建类似的错误。
为了证明我所说的，HTML4 规范禁止任何<tr>元素作为<table>s的直接子元素：
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
HTML5 规范说<tr>在某些情况下可以是 的子代<table>，但这仅适用于 DOM，不适用于标记解析：
8.2.5.4.9 “in table”插入模式
...
标签名称为以下之一的起始标签：“td”、“th”、“tr”
就像已经看到带有标记名称“tbody”的开始标记标记一样，然后重新处理当前标记。