Лучший способ проверить наличие элемента перед привязкой функции в jQuery?

Question

Я использовал следующую пару тест / функция, чтобы прикрепить функции только к соответствующим элементам страницы, если присутствует один или несколько элементов:

function assistedSearch() {
    $('.assistedSearch').focus( function() {
        ...
    });
}
$(function() {
    if ( $('.assistedSearch').length > 0 ) {
        assistedSearch();
    }
});

function inputHinting() {
    $(':input.hint').each( function() {
        ...
    });
}
$(function() {
    if ( $(':input.hint').length > 0 ) {
        inputHinting();
    }
});

Это классический случай чрезмерного проектирования?Является ли тест «если» перед каждой привязкой функции ненужным?

Если это не чрезмерная разработка, существует ли менее интенсивный DOM-способ обеспечения привязки только необходимых функций к текущей странице?

Answer 1

Используя предложенный вами метод, вы фактически теряете производительность, поскольку каждый if запрашивает dom, а ваша функция выдает запрос снова.

function inputHinting() {
    $(':input.hint').each( function() { //query the dom again since it was found.
        ...
    });
}
$(function() {
    if ( $(':input.hint').length > 0 ) { //Query the dom for :input.hint
        inputHinting();
    }
});

jQuery будет обрабатывать это для вас, так как он проверяет наличие элемента, прежде чем что-то с ним сделать. С учетом сказанного, если вы делаете это , вы должны кэшировать свои селекторы следующим образом:

function inputHinting($inputHint) {
    $inputHint.each( function() { 
        ...
    });
}
$(function() {
    var $inputHint = $(':input.hint');
    if ( $inputHint.length > 0 ) { //Query the dom for :input.hint
        inputHinting($inputHint);
    }
});

Делая это, вы запрашиваете дом только один раз.

Answer 2

попробуйте это:

(function(elem)
{
    if(elem.length>0)
        elem.each( function() 
        {
            ...
        });
})($(':input.hint'));

Таким образом, запрос будет выполнен только один раз, затем он передаст коллекцию объектов jquery анонимной функции и выполнит ее.

Answer 3

Тебя это не должно волновать.Jquery проверяет внутренне, так что вам не нужно беспокоиться об этом.Если вы действительно хотите проверить это по какой-то своей причине, свойство .length будет правильным решением.

РЕДАКТИРОВАТЬ

Кроме того, вам не нужно делать

if ( $(':input.hint').length > 0 ){}

Простое использование ниже эквивалентно

if ( $(':input.hint').length) {}