JQuery $(this) против переменной

Ответ 1

Используйте element.

Если element - это коллекция jQuery, соответствующая одному элементу, например $( someId ), просто используйте его.

Если селектор должен был соответствовать более чем одному элементу, тогда element на самом деле elements, набор элементов, поэтому в этом случае вы используете $(this) внутри вашего обработчика кликов, чтобы поймать тот, который был нажат.

Разница объясняется в следующих примерах:

1- Обработчик на одном элементе

var table = $("#myTable");
table.click(function() {
    // Same as $(this), except $(this) creates another
    //  wrapper on the same object (which isn't too expensive anyway)
    table.doSomething();
});

2- Обработчик нескольких элементов

var rows = $("#myTable > tbody > tr");
rows.click(function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

3- Обработчик на одном элементе, но вызываемый для нескольких дочерних элементов

var table = $("#myTable");
// "on" and "live" call handler for only child elements matching selector
// (Even child elements that didn't exist when we added the handler, 
     as long as parent -table in this case- exists)
table.on("click", "tbody > tr", function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

Я нахожу это гарантией (и меньше работы, хотя и очень маленькой разницы) только к существующей оболочке, показывая, что я ожидаю один элемент в этом случае, и я просто работаю с ним. И используйте $(this), когда я имею дело с элементами коллекции соответствующих элементов.

Ответ 2

Скорость, вероятно, будет одинаковой, но использование $(this) намного лучше, потому что вам не нужно беспокоиться о том, что элемент переназначается на что-то еще (или значение элемента полностью теряется).

Кроме того, если вы реорганизуете и используете селектор для класса вместо определенного элемента, функция будет работать для всех согласованных элементов, а не только из них.

Ответ 3

Первое быстрее. Второй запускает тот же селектор дважды. Тем не менее, вы будете использовать этот код только с использованием первого метода, скорее всего, это не то, что вы хотите большую часть времени.

На практике используйте шаблон, например:

$('stuff').click(function(){
    var $$ = $(this); 
    $$.dosomething();
    $$.dosomethingelse();
)}

То есть, если вы используете только один селектор один раз, сначала назначьте его переменной.

Ответ 4

Ну jQuery имеет уникальный кеш элементов dom (который уже был затронут jQuery), поэтому в большинстве случаев это не будет иметь особого значения.

Я действительно не верю, что это ваш случай, хотя jquery фактически обернет это, что является элементом, поэтому вы на самом деле не выполняете какой-либо запрос дважды.

BTW, в некоторых случаях это имеет значение (при делегировании, например).

Ответ 5

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

Ответ 6

Поскольку $(this) вызывает вызов функции, ваш первый пример теоретически быстрее, но, вероятно, не намного.

Ответ 7

Это будет быстрее:

element.click(function(){
    element.dosomething();
)}

Это будет быстрее:

element.bind('click', element.dosomething);

• элемент кэшируется (и не изменяется, я предполагаю)
• use bind ('click') напрямую не использовать .click() wrapper
• if element.dosomething - это функция, которую вы хотите вызвать, передать ее напрямую без дополнительного вызова

Я предполагаю, что element.dosomething() правильный, а также element не изменяется.

Вот пример рабочего кода: http://jsfiddle.net/xhS3b/

//<a href="#" id="element">click me</a>

var element = $('#element');
element.dosomething = function () {
    alert('did something');   
    return false;
}
element.bind('click', element.dosomething);