jQuery - проверка существования элементов

Question

Хорошо, поэтому мне нужно проверить, есть ли в моем меню #Container какие-либо элементы третьего уровня (точнее, h3), и если да, присвойте им какой-нибудь атрибут. Если нет, передайте этот атрибут элементу второго уровня (h2), который всегда существует. Есть:

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

правильный метод?

Answer 1

Используйте для этого .length, 0 / false, если совпадений нет:

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

Короткая версия, менее читаемая:

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

Answer 2

.....

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

Answer 3

Я только что понял ответ, который я отправил на эту функцию, простой способ добавить плагин jQuery для этого был удален давным-давно. Зачем? Я не знаю.

В заключение, ele.length прост, но не очень элегантен, если учесть фундаментальные недостатки. Он не поддерживает разметку стиля jQuery, которая может повредить читабельность, а также вынуждает это делать в выражении «если», когда это действительно «выглядит» как что-то, что jQuery должен обрабатывать «естественно». Так и происходит. Если все ваши действия направлены на применение «атрибута» к существующему элементу, вы можете просто сделать вызов без оператора if. Если элемент существует, он получит новый атрибут. Если его не существует, это ничего не повредит и не сделает ничего, кроме продолжения.

Например:

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

Это сделает любые существующие теги H3 внутри элемента id'd , так как Container будет иметь red фон, если они существуют. Если они не существуют, этот код, по сути, будет игнорироваться. Однако, если вы хотите сделать больше и поддерживать jQuery " chainability ", а также поддерживать разметку стиля jQuery, я бы предложил плагин, который я написал, который добавляет $.exist() к jQuery. ,

Это позволяет использовать различные способы вызова с параметром для обратных вызовов. Проще говоря, вы можете использовать его в операторе if, например if ($('h3').exist() {, или вы можете создать 1-2 метода обратного вызова. Методы обратного вызова чисты и просты. Если указан только 1 (или просто метод обратного вызова first ), это метод обратного вызова " exist ". Другими словами, если элемент существует, он будет запускаться, а затем возвращать элемент (ы), поддерживая, таким образом, jQuery " chainability ". Однако, если он не существует, ничего не произойдет, , если не предоставлен второй метод обратного вызова. Затем он запустит ваш второй метод обратного вызова, очень похожий на " else " вышеупомянутого оператора if.

Некоторые примеры здесь:

$('#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 */ });

Посмотрите еще пример и получите уменьшенную версию плагина ЗДЕСЬ

/*---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---*/

См. Дополнительную информацию об этом в другом ответе ЗДЕСЬ

Answer 4

Чтобы сделать его более читабельным, я предлагаю этот твик:

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

Answer 5

Проверка длины возвращаемого объекта jQuery

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

Answer 6

Проверка размера или длины возвращаемого объекта jQuery

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

или

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