jQuery - 检查元素的存在答案

【问题标题】：jQuery - checking existence of elementsjQuery - 检查元素的存在
【发布时间】：2015-12-17 15:27:03
【问题描述】：

好的，所以基本上我需要检查，在我的菜单#Container 中是否存在任何第三级元素（确切地说是h3），如果是，则给它们一些属性。如果不将此属性赋予始终存在的二级元素 (h2)。是：

if ($('h3')) {
  //some attribute
} else {
 //some attribute
};

正确的方法？

【问题讨论】：

标签： jquery-selectors

【解决方案1】：

为此使用 .length，如果没有任何匹配项，则为 0/false：

if ($('h3').length) {
 //some attribute
} else {
 //some attribute
};

短版，可读性差：

$($('h3').length ? 'h3' : 'h2').addClass("bob");

【讨论】：

【解决方案2】：

.....

if ($('#Container h3').length) {
  //some attribute
} else {
 //some attribute
};

【讨论】：

【解决方案3】：

检查返回的jQuery对象的长度

if ($('h3').length != 0)) {
    $('h3').attr(...);
}
else {
    $('h2').attr(...);
}

【讨论】：

【解决方案4】：

为了使其更具可读性，我提供了以下调整：

var h3ElementsExist = $('h3').length
if (h3ElementsExist) {
  //some attribute
} else {
 //some attribute
};

【讨论】：

【解决方案5】：

我刚刚意识到我在此功能上发布的一个答案，一个添加 jQuery 插件的简单方法，很久以前就被删除了。为什么？我不知道。

总之，ele.length 很简单，但考虑到根本缺陷时，它并不是很优雅。它不维护 jQuery 样式标记，这可能会损害可读性，并且当这真的像 jQuery 应该“自然”处理的东西一样“出现”时，它会在“if”语句中强制执行此操作。就这样。如果您所做的只是寻求将“属性”应用于现有元素，则可以简单地进行调用，而无需 if 语句。如果元素存在，它将获取新属性。如果它不存在，它不会伤害任何东西或做任何事情，除了继续。

例如：

$('#Container h3').css('background', 'red');

这将使元素中的任何现有H3 标记id'd 为Container 具有red 背景（如果存在）。如果它们不存在，则基本上将忽略此代码。但是，如果您想做更多，并维护 jQuery "chainability" 以及维护 jQuery 样式标记，那么我建议我编写一个添加 $.exist() 的插件到 jQuery。

它还允许通过多种方式调用回调参数。简单来说，可以在if ($('h3').exist() {等if语句中使用，也可以创建1对2的回调方法。回调方法纯粹而简单。如果只提供了 1，（或者只是 first 回调方法）它是“exist”回调方法。换句话说，如果元素存在，它将触发，然后返回元素，从而保持 jQuery "chainability"。但是，如果它不存在，则不会发生任何事情，除非提供了第二个回调方法。然后它会触发你的第二个回调方法，就像前面提到的 if 语句的“else”。

这里有一些例子：

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ });

有 2 个回调

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ },
function(boolFalse, elements) { /* Elements did NOT EXIST - DO WORK */ });

查看更多示例并获取插件的缩小版HERE

/*---PULIGIN---*/
;;(function($){$.exist||($.extend({exist:function(){var a,c,d;if(arguments.length)for(x in arguments)switch(typeof arguments[x]){case "function":"undefined"==typeof c?c=arguments[x]:d=arguments[x];break;case "object":if(arguments[x]instanceof jQuery)a=arguments[x];else{var b=arguments[x];for(y in b)"function"==typeof b[y]&&("undefined"==typeof c?c=b[y]:d=b[y]),"object"==typeof b[y]&&b[y]instanceof jQuery&&(a=b[y]),"string"==typeof b[y]&&(a=$(b[y]))}break;case "string":a=$(arguments[x])}if("function"==typeof c){var e=0<a.length?!0:!1;if(e)return a.each(function(b){c.apply(this,[e,a,b])});if("function"==typeof d)return d.apply(a,[e,a]),a}return 1>=a.length?0<a.length?!0:!1:a.length}}),$.fn.extend({exist:function(){var a=[$(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return $.exist.apply($,a)}}))})(jQuery);
/*---PULIGIN---*/

在另一个答案HERE上查看有关它的更多信息

【讨论】：

【解决方案6】：

检查返回的 jQuery 对象的大小或长度

if ($('h3').size() != 0)) {
    $('h3').attr(...);
}
else {
    $('h2').attr(...);
}

或

if ($('h3').length != 0)) {
    $('h3').attr(...);
}
else {
    $('h2').attr(...);
}

【讨论】：