Что делает функция .end() в jQuery?

Я уже прочитал эту веб-страницу http://api.jquery.com/end/, но я до сих пор не знаю, что делает .end(). Для чего и как вы его используете?

Я также читаю книгу jQuery, но она слегка глазурует над .end() и не дает никаких примеров того, для чего она предназначена. Может кто-нибудь уточнить?

Ответ 1

$("body").find("span").css("border", "2px red solid");

против

$("body").find("span").end().css("border", "2px red solid");

Выполняйте эти инструкции отдельно в консоли Firebug на этой точной странице и обратите внимание на то, насколько они отличаются. В принципе, .end() сообщает ему вернуться к телу после нахождения всех пролетов и применить границу к телу, а не к пролетам. Если у нас нет .end(), код jQuery в основном ведет себя нормально и применяет .css() к нашим span элементам внутри тела.

BODY > SPAN > APPLY BORDER TO SPANS

с end() он становится

BODY > SPAN > GO BACK TO BODY > APPLY BORDER TO BODY

find() - это деструктивная операция, означающая, что она изменяет элементы внутри массива объектов jquery.

$('body')

наш текущий элемент - тело

$('body').find('span')

мы использовали деструктивную операцию find(), которая изменяет всю совокупность объектов, заполняемых внутренними частями тела, тело больше не находится в коллекции

$('body').find('span').end()

потому что find - это "деструктивная" операция, к которой он возвращается, прежде чем мы сделали .find(), в основном un-does или ctrl-Z - последнее, что изменило нашу коллекцию jquery.

Ответ 2

В основном он возвращается к родительскому набору. Например:

$('.tree')
    .find('.branch')
        .find('.leaf')
        .addClass('tacks-onto-leaf')
        .end()
    .addClass('tacks-onto-branch')
    .end()
.addClass('tacks-onto-tree');

Ответ 3

Он возвращает "область действия" закодированного оператора JQuery на предыдущий уровень.

Тэги в объекте jQuery изначально [$ ('P')]: P, P

Теги в объекте jQuery после поиска [$ ('P'). find ('SPAN')]: SPAN, SPAN, SPAN, SPAN, SPAN

Теги в объекте jQuery после конца [$ ('P'). find ('SPAN'). end()]: P, P

$('span')              //all <span> tags in the doc
  .find('#foo')          //all <span> with id foo
    .addClass('blinkyRed') //adds class blinkyRed <span id='foo'> 
  .end()                 //reverts scope to all <span> tags
.addClass('Bold')      //adds class Bold to all <span> tags

Ответ 4

Он позволяет текущему "определению области видимости" заканчиваться и переопределяться. Например, скажем, у вас есть HTML-код:

<div id="people">
 <ul>
   <li>A</li>
   <li>B</li>
 </ul>
 <ul>
   <li>C</li>
   <li>D</li>
  </ul>
</div>

Сначала вы можете выбрать родителя:

$('#people')

И измените дочерние элементы ul, например

#('#people').find('ul').css('border', '1px solid #f00')

Но что произошло, если вы хотите продолжить редактирование родительского элемента (#people)? Вы можете запустить новый finder $('# people') или просто связать его с первой строкой, предварительно используя .end(), чтобы уведомить jQuery о том, что вы хотите "закрыть" find() и область поиска, чтобы вернуться к preceeding find (implicity the $('# people'), например)

#('#people').find('ul').css('border', '1px solid #f00').end().css('border', '1px dashed #00f')

Итак, эта строка будет: захватить все дочерние UL #people, изменить их границы на красный, а затем изменить границу родительского элемента #people на пунктирный и синий.

Ответ 5

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

add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings, slice, clone, appendTo, prependTo, insertBefore, insertAfter или replaceAll

.end() можно использовать для reset вашего выбора обратно к вашему исходному набору элементов после выполнения некоторых манипуляций с расширенным выбором.