jQuery получает исходный контекст из поиска

#jquery #jquery-selectors #dom-traversal

#jquery #jquery-селекторы #dom-обход

Вопрос:

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

 <form>
  <button>Some Button</button>
</form>

$('form').find('button').click(function(){
  $(this).closest('form').submit();  // is there a better way of getting the form?
});
  

Мне интересно, есть ли более эффективный способ выбора исходного элемента формы в моей находке. Вместо того, чтобы выполнять резервное копирование dom, есть ли какой-либо способ получить ссылку на мой исходный form объект внутри события click его потомка?

К сожалению, в этом случае .context даст мне button элемент, каким-либо образом я могу получить исходный контекст? Или мне просто нужно пройти вверх?

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

Комментарии:

1. Не знаю, что лучше с точки зрения производительности, но, возможно, parent() — лучший вариант?

2. да, но я на самом деле вложен немного глубже, чем в моем примере

Ответ №1:

Я думаю, смысл в том, чтобы кэшировать первый вызов? Просто запустите его через each(), что позволит вам сохранить контекст в параметрах этого метода.

 $('form').each(function(idx,el){
   $(this).find('button').click(function(){
      $(el).submit();  
   });
});
  

Ответ №2:

Это зависит от того, что вы пытаетесь сделать. Если вы находитесь в обратном вызове события, нет, нет способа получить исходный выбор. Единственные данные, которые у вас есть, это то, на каком элементе был сделан щелчок, и несколько подробностей о самом событии щелчка. Не забывайте, что form может совпадать несколько разных элементов, поэтому узнать, какой из них вы должны сопоставлять, невозможно. (Если только не существует только одного — но это все равно не очень стабильный способ кодирования вашего сайта.)

Если вы используете только стандартный контекст цепочки методов, вы можете использовать end , чтобы вернуться на один этап поиска:

 $('form').find('button').prop({name: 'foo', value: 'bar'}).end().submit();
  

Комментарии:

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

Ответ №3:

Если у вас есть только одна форма, вы могли бы сделать что-то вроде этого:

 var $form = $('form');
$form.find('button').click(function() {
    $form.submit();
});
  

Просто вычислите $('form') один раз и используйте его по мере необходимости.

Хотя я сомневаюсь, что $(this).closest('form') это действительно будет так дорого. OTOH, хорошие привычки — это хорошие привычки, и не вычислять одно и то же снова и снова, как правило, хорошая привычка.

Ответ №4:

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

 var blah = $('blah');

//The following variable will have no direct reference to blah, but 
//blah can still be used if it stays in scope:
var thingWithNoReferenceToBlah = blah.find('thing');