我想选择下面的每个元素并对它应用多个jquery命令,任何命令.
HTML:
<body>
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
<div class="last"></div> <!-- SELECT FROM HERE -->
<div class="option"></div>
<div class="option">
<img src="a.jpg"/>
<table>
<td><tr>1</tr></td>
<td><tr>2</tr></td>
</table>
</div>
<div class="option"></div>
</body>
jQuery的:
$(".last").nextAll().each(function () {
$(this).css('background-color','red');
$(this).addClass('below');
var thisobj = $(this);
//Example ->
$(this).load(function() {
$(thisobj).addClass('loaded');
});
$(this).error(function(){
$(thisobj).addClass('error');
});
//more code etc...
});
使用jQuery使html看起来像这样:选择class下面的所有内容并应用函数.计算所有div是否已加载.
<body>
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
<div class="last"></div>
<div class="option loaded" style="background-color:red;"></div>
<div class="option error" style="background-color:red;">
<img class="loaded" style="background-color:red;" src="a.jpg"/>
<table class="loaded" style="background-color:red;">
<tr class="error" style="background-color:red;">
<td class="loaded" style="background-color:red;">abc</td>
</tr>
<tr class="loaded" style="background-color:red;">
<td class="loaded" style="background-color:red;">abc</td>
</tr>
</table>
</div>
<div class="loaded" class="option" style="background-color:red;"></div>
</body>
干得好.这将允许您遍历DOM树.我只是应用红色样式来显示它的工作原理,但你可以相应地修改它
function style_children(parent) {
parent.css('background-color', 'red');
parent.children().each(function() {
style_children($(this));
});
}
$(".last").nextAll().each(function() {
style_children($(this));
});
并纠正我,如果我错了,但如果这个放在$(document).ready()函数中,就像它应该一样,你的加载和错误函数将不会触发b/c它们已经在你的整个文档被触发之前准备.只有在doc.ready被触发后动态添加内容,加载和错误功能才有效.