$ .children ("селектор") против $ ("селектор", родитель) против селектора "родитель> ребенок" - PullRequest
Новая
       5

$ .children ("селектор") против $ ("селектор", родитель) против селектора "родитель> ребенок"

3 голосов
/ 28 сентября 2011

У меня есть следующая структура таблицы. 

<table id='mytable'>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
        </table>
    </td></tr>
</table>

Я хочу просто получить прямые элементы TR из mytable.Очевидно, есть 4 прямых TR из mytable.

. Ниже показаны три утверждения.Я ожидал, что они вернут тот же результат.Однако они не . 

var mytable$ = $("#mytable");

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4
var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0
var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

Я хотел только синтаксис для получения trcount1.

Почему trcount2 и trcount3 нет4?

Спасибо

Алекс

==================================

Спасибо за ответ jfriend00.

Это то, что я хочу. 

$("> tbody > tr", mytable$).length; // 4
mytable$.find("> tbody > tr").length; // 4

Я пропустил ">" до tbody.

Ответы [ 2 ]

4 голосов
/ 28 сентября 2011

Внутри браузера ваш DOM на самом деле выглядит следующим образом (обратите внимание на автоматическое включение тегов <tbody>): 

<table id='mytable'>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
          <tbody>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
          </tbody>
        </table>
    </td></tr>
  </tbody>
</table>

Итак, учитывая это, вот как объяснить ваши наблюдения: 

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4

Вы спрашиваете о прямых детях стола, которые tbody, а затем о детях этого. Есть один прямой дочерний элемент, который является tbody, и есть четыре прямых дочерних элемента этого тега tbody, поэтому вы получаете 4. 

var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0

Вы запрашиваете прямых дочерних элементов таблицы (которая является только объектом tbody), которые также соответствуют этому селектору "tbody > tr". Поскольку мы смотрим только на прямых потомков таблицы, это только сам объект tbody, а объект tbody iself не соответствует "tbody > tr", в результате получается 0, так как нет прямых потомков, соответствующих этому критерию .

Помните, .children() только для детей. Если вы хотите считать всех детей и детей детьми, то вы используете .find() или просто помещаете тег в главный селектор. 

var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

Здесь вы запрашиваете любой тег tr внутри mytable, у которого есть прямой родитель, tbody. Их семь, поскольку все теги tr в mytable соответствуют этим критериям.

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

$("#mytable > tbody > tr")   // will be 4

Если вам нужны все теги tr в обеих таблицах, я бы порекомендовал: 

$("#mytable  tr")   // will be 7

Если вы хотите использовать только теги tr во второй таблице, я бы порекомендовал: 

$("#mytable table tr")   // will be 3
1 голос
/ 28 сентября 2011

trcount1 получает все tbody с, которые являются прямыми потомками mytable$, а затем получает всех прямых потомков того, что являются вашими четырьмя tr с.

trcount2 ищет всех tr s, которые являются прямыми потомками tbody у детей mytable$.Дочерние элементы mytable$ - это только один tbody.

trcount3 ищет все tr s, которые являются прямыми потомками tbody в контексте mytable$.Первые четыре tr являются прямыми потомками tbody, а вложенные tr являются прямыми потомками tbody.

...