Question

我有一些像这样的jQuery：

$('#mydiv1').css('color', 'red');
$('#mydiv2').css('color', 'blue');
$('#mydiv3').css('color', 'green');
$('#mydiv4').css('color', 'orange');
$('#mydiv5').css('color', 'purple');

我认为它应该是这样的，所以它只在元素存在时起作用：

if ($('#mydiv1').length) {.css('color', 'red')}
if ($('#mydiv2').length) {.css('color', 'blue')}
if ($('#mydiv3').length) {.css('color', 'green')}
...

使用此命名约定，是否有更好的方法来检查元素是否存在？像'每个#mydiv（n）'的东西？

Answer 1

使用jQuery检查元素是否存在是不必要的。如果找不到匹配的元素，它将不会做任何事情。

如果您想要的是将CSS应用于该模式后面的所有ID的更短方式，那么您可以这样做：

var colors = ['red', 'blue', 'green', 'orange', 'purple'];
for (var i = 0; i < 5; i++) {
    $('#mydiv' + (i+1)).css('color', colors[i]);
}

如果您想按文档顺序应用这些颜色（元素在HTML中的显示顺序），您可以使用jQuery的attribute-starts-with selector：

$('[id^=mydiv]').each(function (i) {
    $(this).css('color', colors[i]);
});

Answer 2

jQuery函数（$）返回元素集合（从不是null或undefined值），因此如果对于给定的选择器{{1}该集合为0，代码（在您的情况下为length调用）将不会被执行，或导致类似.css()引用异常的任何内容。

jQuery循环遍历可能的元素，看看它们是否存在？

2 个答案: