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

Question

с учетом следующего

$("#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")?

Answer 1

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

Запятая в вашем селекторе эквивалентна поговорке:

$("#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
  }
});

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

Answer 2

То, что многие люди не понимают в 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
});

Answer 3

Просто проверьте, какой идентификатор вы сейчас обрабатываете в $(this)

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