выбор элементов jQuery

Question

Я не могу просто найти эту информацию в документации по API, потому что я не знаю, как это правильно назвать. Поэтому вопрос:

У меня есть этот вид использования селектора JQuery:

var $table = $('#sort-table');   // id of <table> 
var $rows = $('tbody > tr', $table); // , $table ??? 

Так что означает второй параметр для $ строк? И если бы вы были так добры, не могли бы вы помочь мне найти это в документации jQuery?

Answer 1

Это параметр контекста, это эквивалентно $table.find('tbody > tr')

Данного селектора tbody > tr будет выглядеть внутри Teh данного контекста $table ,

Ex: На вашей странице, вы можете иметь более 1 таблицу, и вы заинтересованы в строках только на одной таблице в том случае, если вы используете селектор $('tbody > tr') подберет все tr сек во всех таблицах. Это не то, что вы хотите.

Но вы передаете контекст как таблицы вы заинтересованы как в $('tbody > tr', $table), то селектор tbody > tr будет выполнен только для детей $table таблицы, выборки только желательные tr с.

Демонстрация: Fiddle.

Если вы посмотрите на демонстрационный пример, атрибут css $rows.css('color', 'red'); применяется только к первой таблице, где $('tbody > tr').css('font-weight', 'bold'); применяется ко всем таблицам.

Answer 2

var $ rows = $ ('tbody> tr', $ table);

Здесь $ таблица контекста, в соответствии с jQuery documentsjQuery(selector [, context ])

$('tbody > tr', $table); 

или

$table.find('tbody > tr'); 

context используется для вызова поиска по нему с заданными критериями отбора

Answer 3

2-й аргумент предоставляет context для выбора. Ваша переменная rows будет содержать tr элементов, которые являются прямыми детьми элемента tbody, которые являются потомками элемента, содержащегося в $table.

Вы также написали это так, что в этом случае будет вести себя точно так же:

var $rows = $("#sort-table tbody > tr"); 

Контекст аргумент несколько эквивалентен методу .find(), так что вы также могли бы написать как это:

var $rows = $table.find("tbody > tr"); 

Answer 4

это значит найти tr в $ таблице

это похоже на вызов

var $rows = $table.find('tbody > tr'); 

второго параметр $('tbody > tr', $table); является контекстом, который является необязательным ..

Answer 5

Это называется контекстом селектора и используется, чтобы ограничить запрос на определенный «диапазон», указанный в JQuery-объекта, который вы используете в качестве контекста ..

Из документов:

По умолчанию селекторы выполняют поиск в DOM, начиная с в корневом каталоге документа. Тем не менее, альтернативный контекст может быть задан для поиска, используя необязательный второй параметр для функции $(). Например, чтобы сделать поиск в обработчике события, поиск может быть ограничено следующим образом:

$("div.foo").click(function() { 
    $( "span", this).addClass("bar"); 
}); 

См: http://api.jquery.com/jQuery/ для получения дополнительной информации о том

В вашем примере, что будет означать, что :

var $rows = $('tbody > tr', $table); 

такая же, как:

var $rows = $table.find('tbody > tr'); 

Answer 6

Посмотрите, что происходит здесь:

var $table = $('#sort-table'); 
var $rows = $('tbody > tr', $table); 

В первой строке кода переменной $table держит идентификатор таблицы #sort-table.

Во второй строке кода говорится, что 'tbody > tr' в этом $table.

Это может быть написано, как это тоже:

var $rows = $('tbody > tr', '#sort-table'); 
    //-says find-^^^^^^^^^--in-^^^^^^^^^^^----this table 

Вы можете добиться этого с помощью функции поиска слишком:

var $rows = $('#sort-table').find('tbody > tr'); 

или

var $rows = $table.find('tbody > tr');