Определить JQuery "EQ"

Question

Мне трудно обернуть голову вокруг jQuery eq . Может кто-нибудь объяснить мне его использование? Что и как оно индексирует?

спасибо.

Answer 1

С этим HTML:

<ul>
    <li>Mario</li>
    <li>Luigi</li>
    <li>Princess</li>
    <li>Toad</li>
</ul>

И этот JavaScript:

alert($("ul li").eq(0).text()); // Mario
alert($("ul li").eq(1).text()); // Luigi
alert($("ul li").eq(2).text()); // Princess
alert($("ul li").eq(3).text()); // Toad

Answer 2

.eq(i) возвращает элемент из коллекции по указанному индексу i.

В примере по ссылке вы разместили:

$("p").eq(1).css("color", "red")

Он в основном говорит: «Найдите все элементы, которые соответствуют $ (« p »), затем возьмите второй и измените его цвет на красный».

$("p") соответствует всем <p> элементам в вашем документе. Теперь у вас есть коллекция из них.

$("p").eq(1) уменьшает эту коллекцию только до 2-го элемента.

деталь .css("color", "red") просто воздействует на этот элемент, чтобы изменить его цвет на красный.

Answer 3

Чтобы понять, как eq() работает, я думаю, что это помогает понять, как $() работает в jQuery. Когда вы указываете

$([selector],[context])

//which is the same as

$([context]).find([selector])

Возвращается объект jQuery (иногда называемый упакованным набором ), который, помимо других свойств, имеет свойство, начинающееся с 0 и увеличивается на 1 для каждого элемента, соответствующего селектору. Также устанавливается свойство length, поэтому совпадающие элементы объекта jQuery можно перебирать как массив (используя цикл for или такие команды, как each([callback])).

Давайте теперь посмотрим на источник для eq()

 eq: function( i ) {
  return this.slice( i, +i + 1 );
 },

мы видим, что eq() достигается с помощью команды slice() объекта jQuery, поэтому давайте также посмотрим на это

 slice: function() {
  return this.pushStack( Array.prototype.slice.apply( this, arguments ),
   "slice", Array.prototype.slice.call(arguments).join(",") );
 },

, а также нужно посмотреть на pushStack(), команда, которая довольно часто используется внутри

 // Take an array of elements and push it onto the stack
 // (returning the new matched element set)
 pushStack: function( elems, name, selector ) {
  // Build a new jQuery matched element set
  var ret = jQuery( elems );

  // Add the old object onto the stack (as a reference)
  ret.prevObject = this;

  ret.context = this.context;

  if ( name === "find" )
   ret.selector = this.selector + (this.selector ? " " : "") + selector;
  else if ( name )
   ret.selector = this.selector + "." + name + "(" + selector + ")";

  // Return the newly-formed element set
  return ret;
 },

мы можем видеть, что pushStack принимает массив и возвращает новый объект jQuery. Элементы, которые формируют совпадающие элементы нового объекта jQuery, получаются путем вызова Function.apply функции JavaScript Array slice и передачи arguments функции слайса jQuery в качестве argsArray.

Команда get(), с другой стороны, более проста. Давайте посмотрим на источник

 // Get the Nth element in the matched element set OR
 // Get the whole matched element set as a clean array
 get: function( num ) {
  return num === undefined ?

   // Return a 'clean' array
   Array.prototype.slice.call( this ) :

   // Return just the object
   this[ num ];
 }

вызывается без аргумента для параметра num, объект jQuery преобразуется в массив, используя Function.call в функции JavaScript Array slice. Если определено num, то возвращается значение, содержащееся в соответствующем свойстве объекта jQuery, во многом аналогично следующему

$([selector]).get(0)

//is the same as

$([selector])[0]

Answer 4

посмотрите на пример из документации:

$("p").eq(1).css("color", "red")

$("p")                selects all paragraphs in your document
.eq(1)                selects the second element only
.css("color", "red")  applies css rule to the selected element

Answer 5

Звучит так, как будто вы попали в ловушку слова «указатель».

В этом случае «индекс» относится к конкретному элементу в коллекции элементов. Таким образом, eq даст вам доступ к одному элементу в соответствующем наборе элементов.