JQuery несколько селекторов, $ (this) ссылка?

учитывая следующее

$("#identifier div:first, #idetifier2").fadeOut(300,function() {
  // I need to reference just the '#identifier div:first' element
  // however $(this) will grab both selectors
});

есть ли лучший способ сделать это, кроме как снова вызвать $("#identifier div: first")?

7
jquery jquery-selectors

3 ответов

нет, он вызовет функцию для каждого дескриптора отдельно.

запятая в селекторе эквивалентна слову:

$("#identifier div:first").fadeOut(300,function() {
  // $(this) -> '#identifier div:first'
  });

$("#idetifier2").fadeOut(300,function() {
   // $(this) -> '#identifier2'
});

Вы можете проверить, говорят (непроверено):

$("#identifier div:first, #idetifier2").fadeOut(300,function() {
  if($(this).is("#identifier div:first")  {
     // do something
  }
});

однако, если вы хотите делать разные вещи (как кажется из вашего поста), лучше прикрепить их отдельно.

5

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

так $("#identifier div:first, #identifier2") будет отдельно соответствовать обоим:

$("#identifier div:first")
and
$("#identifier2")

и, назовем указанное fadeOut функция и это обработчик отдельно для каждого матча. Это означает, что у каждого обработчика будет свой this значение, установленное для соответствия селектор.

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

for (var i = 0; i < matches.length; i++) {
    jQuery["fadeOut"].call(matches[i], duration, easing, fn);
}

если вы хотите использовать отдельный код для двух разных совпадений, то, возможно, лучше просто использовать два отдельных оператора jQuery:

$("#identifier div:first").fadeOut(300,function() {
    // do stuff for #identifier div:first
});

$("#identifier2").fadeOut(300,function() {
    // do stuff for #identifier2
});

если у вас много кода в блоке, и это в основном то же самое, то вы также можете ветвиться в пределах одного блок общего кода:

$("#identifier div:first, #identifier2").fadeOut(300,function() {
    if (this.id != "identifier2") {
        // execute code that only applies to the #identifier match
    }
    // execute rest of common code
});
3

просто проверьте, какой ID вы в настоящее время обрабатываете в $(this)

if(this.id == "identifier"){ //your code goes here }
1