Policz bezpośrednie podrzędne elementy div za pomocą jQuery

Question 1

Mam następującą strukturę węzłów HTML:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

Jak policzyć liczbę najbliższych dzieci foo, które są typu div? W powyższym przykładzie wynik powinien wynosić dwa ( bari baz).

Question 2

$("#foo > div").length

Bezpośrednie dzieci elementu o identyfikatorze „foo”, które są elementami div. Następnie pobieram rozmiar zapakowanego zestawu.

Question 3

Zalecam używanie $('#foo').children().size()dla lepszej wydajności.

Stworzyłem test jsperf, aby zobaczyć różnicę prędkości, a children()metoda pokonała podejście selektora dziecka (#foo> div) o co najmniej 60% w Chrome (wersja kanaryjska v15) o 20-30% w przeglądarce Firefox (v4).

Nawiasem mówiąc, nie trzeba dodawać, że te dwa podejścia dają takie same wyniki (w tym przypadku 1000).

[Aktualizacja] Zaktualizowałem test, aby uwzględnić test rozmiaru () w porównaniu z długością i nie mają one większego znaczenia (wynik: lengthużycie jest nieco szybsze (2%) niż size())

[Aktualizacja] Ze względu na niepoprawne znaczniki widoczne w OP (przed aktualizacją „zweryfikowaną znacznikami” przeze mnie), oba $("#foo > div").length& $('#foo').children().lengthskutkowały tym samym ( jsfiddle ). Ale aby uzyskać poprawną odpowiedź, aby uzyskać TYLKO dzieci „div”, jeden POWINIEN użyć selektora podrzędnego, aby uzyskać poprawną i lepszą wydajność

Question 4

$("#foo > div")

wybiera wszystkie elementy div, które są bezpośrednimi potomkami #foo,
gdy masz już zestaw elementów podrzędnych , możesz użyć funkcji size:

$("#foo > div").size()

lub możesz użyć

$("#foo > div").length

Oba zwrócą ten sam wynik

Question 5

$('#foo').children('div').length

Question 6

W odpowiedzi na mrCoders odpowiedz przy użyciu jsperf, dlaczego po prostu nie użyć węzła dom?

var $foo = $('#foo');
var count = $foo[0].childElementCount

Możesz wypróbować test tutaj: http://jsperf.com/jquery-child-ele-size/7

Ta metoda daje 46 095 op / s, podczas gdy inne metody w najlepszym przypadku 2000 op / s

Question 7

$('#foo > div').size()

Question 8

$("#foo > div").length

jQuery ma funkcję .size (), która zwraca liczbę wystąpień elementu, ale zgodnie z dokumentacją jQuery jest wolniejsza i zwraca tę samą wartość co właściwość .length, dlatego najlepiej jest po prostu użyć rozszerzenia. właściwość length. Stąd: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Question 9

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

Question 10

W najnowszej wersji jquery możesz używać $("#superpics div").children().length.

Question 11

var n_numTabs = $("#superpics div").size();

lub

var n_numTabs = $("#superpics div").length;

Jak już powiedziano, oba zwracają ten sam wynik.
Ale funkcja size () jest bardziej jQuery "PC".
Miałem podobny problem z moją stroną.
Na razie pomiń> i powinno działać dobrze.

Question 12

$("div", "#superpics").size();

Question 13

Spróbuj tego dla bezpośrednich elementów potomnych typu div

$("#foo > div")[0].children.length

Answer 1

183

Mam następującą strukturę węzłów HTML:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

Jak policzyć liczbę najbliższych dzieci foo, które są typu div? W powyższym przykładzie wynik powinien wynosić dwa ( bari baz).

javascript jquery dom jquery-selectors Dónal
źródło

1

Dodałem test jsperf, aby zobaczyć różnicę prędkości między różnymi podejściami. zobacz moją odpowiedź poniżej

manikanta

Answer 2

1

Dodałem test jsperf, aby zobaczyć różnicę prędkości między różnymi podejściami. zobacz moją odpowiedź poniżej

manikanta

Answer 3

350

$("#foo > div").length

Bezpośrednie dzieci elementu o identyfikatorze „foo”, które są elementami div. Następnie pobieram rozmiar zapakowanego zestawu.

Garry Shutler
źródło

1

Właśnie zastanawiałem się w piątek, jak policzyć kolumny tabeli za pomocą jQuery. Muszę spróbować podobnego podejścia: $('#table > th').size().

Jim Schubert,

1

Czasami to nie działa i musisz użyć $ ('# foo'). Children (). Size (), który i tak jest szybszy zgodnie z @mrCoder

472084

Jeśli chcę użyć tego zamiast #foo to. Jak tego użyć?

Mukesh

@ 472084 Jeśli zrobisz to w ten sposób, policzy również element „span”. Zwróć uwagę, jak pytanie określa, że chce liczyć tylko elementy „div”, a nie wszystkie.

Angel Blanco

Answer 4

1

Właśnie zastanawiałem się w piątek, jak policzyć kolumny tabeli za pomocą jQuery. Muszę spróbować podobnego podejścia: $('#table > th').size().

Jim Schubert,

Answer 5

1

Czasami to nie działa i musisz użyć $ ('# foo'). Children (). Size (), który i tak jest szybszy zgodnie z @mrCoder

472084

Answer 6

Jeśli chcę użyć tego zamiast #foo to. Jak tego użyć?

Mukesh

Answer 7

@ 472084 Jeśli zrobisz to w ten sposób, policzy również element „span”. Zwróć uwagę, jak pytanie określa, że chce liczyć tylko elementy „div”, a nie wszystkie.

Angel Blanco

Answer 8

68

Zalecam używanie $('#foo').children().size()dla lepszej wydajności.

Stworzyłem test jsperf, aby zobaczyć różnicę prędkości, a children()metoda pokonała podejście selektora dziecka (#foo> div) o co najmniej 60% w Chrome (wersja kanaryjska v15) o 20-30% w przeglądarce Firefox (v4).

Nawiasem mówiąc, nie trzeba dodawać, że te dwa podejścia dają takie same wyniki (w tym przypadku 1000).

[Aktualizacja] Zaktualizowałem test, aby uwzględnić test rozmiaru () w porównaniu z długością i nie mają one większego znaczenia (wynik: lengthużycie jest nieco szybsze (2%) niż size())

[Aktualizacja] Ze względu na niepoprawne znaczniki widoczne w OP (przed aktualizacją „zweryfikowaną znacznikami” przeze mnie), oba $("#foo > div").length& $('#foo').children().lengthskutkowały tym samym ( jsfiddle ). Ale aby uzyskać poprawną odpowiedź, aby uzyskać TYLKO dzieci „div”, jeden POWINIEN użyć selektora podrzędnego, aby uzyskać poprawną i lepszą wydajność

manikanta
źródło

choć to pytanie jest kiedyś zadawane, chciałem się tylko podzielić, aby to mogło pomóc komuś od teraz

manikanta.

Gdzie jest filtrowanie tylko dzieci „div”?

Andrey Tserkus

2

.lengthw rzeczywistości jest preferowaną metodą, ponieważ nie ma narzutu wywołania funkcji.

Nic Aitch,

Tak, selektor potomny jest poprawny, ponieważ używa natywnych selektorów CSS, więc wybór jest napisany w C ++, a nie w JavaScript ... Spora różnica w wydajności. Ta odpowiedź jest łatwiejsza do zrozumienia, ale znacznie wolniejsza.

mdenton8

@manikanta Hej, bardzo szczegółowy anser. Przepraszam, że przeszkadzam, jedno pytanie. Jeśli lubię $('#extraLinks').children().size()liczyć pola tekstowe w div (o nazwie extraLinks), dlaczego otrzymuję, 4gdy mają one tylko 2 lata. Ogólnie rzecz biorąc, otrzymuję długość pomnożoną przez 2 ... Masz jakiś pomysł, dlaczego? Dzięki

slevin

Answer 9

choć to pytanie jest kiedyś zadawane, chciałem się tylko podzielić, aby to mogło pomóc komuś od teraz

manikanta.

Answer 10

Gdzie jest filtrowanie tylko dzieci „div”?

Andrey Tserkus

Answer 11

2

.lengthw rzeczywistości jest preferowaną metodą, ponieważ nie ma narzutu wywołania funkcji.

Nic Aitch,

Answer 12

Tak, selektor potomny jest poprawny, ponieważ używa natywnych selektorów CSS, więc wybór jest napisany w C ++, a nie w JavaScript ... Spora różnica w wydajności. Ta odpowiedź jest łatwiejsza do zrozumienia, ale znacznie wolniejsza.

mdenton8

Answer 13

@manikanta Hej, bardzo szczegółowy anser. Przepraszam, że przeszkadzam, jedno pytanie. Jeśli lubię $('#extraLinks').children().size()liczyć pola tekstowe w div (o nazwie extraLinks), dlaczego otrzymuję, 4gdy mają one tylko 2 lata. Ogólnie rzecz biorąc, otrzymuję długość pomnożoną przez 2 ... Masz jakiś pomysł, dlaczego? Dzięki

slevin

Answer 14

$("#foo > div")

wybiera wszystkie elementy div, które są bezpośrednimi potomkami #foo,
gdy masz już zestaw elementów podrzędnych , możesz użyć funkcji size:

$("#foo > div").size()

lub możesz użyć

$("#foo > div").length

Oba zwrócą ten sam wynik

Answer 15

17

$('#foo').children('div').length

Abdennour TOUMI
źródło

Answer 16

8

W odpowiedzi na mrCoders odpowiedz przy użyciu jsperf, dlaczego po prostu nie użyć węzła dom?

var $foo = $('#foo');
var count = $foo[0].childElementCount

Możesz wypróbować test tutaj: http://jsperf.com/jquery-child-ele-size/7

Ta metoda daje 46 095 op / s, podczas gdy inne metody w najlepszym przypadku 2000 op / s

HaxElit
źródło

2

OP poprosił tylko o elementy potomne div

dj18

Answer 17

2

OP poprosił tylko o elementy potomne div

dj18

Answer 18

6

$('#foo > div').size()

gadżet
źródło

Answer 19

$("#foo > div").length

jQuery ma funkcję .size (), która zwraca liczbę wystąpień elementu, ale zgodnie z dokumentacją jQuery jest wolniejsza i zwraca tę samą wartość co właściwość .length, dlatego najlepiej jest po prostu użyć rozszerzenia. właściwość length. Stąd: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 20

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

Answer 21

3

W najnowszej wersji jquery możesz używać $("#superpics div").children().length.

Kent Thomas
źródło

Answer 22

2

var n_numTabs = $("#superpics div").size();

lub

var n_numTabs = $("#superpics div").length;

Jak już powiedziano, oba zwracają ten sam wynik.
Ale funkcja size () jest bardziej jQuery "PC".
Miałem podobny problem z moją stroną.
Na razie pomiń> i powinno działać dobrze.

Andrew Perkins
źródło

Selektor potomków zwróci wszystkich potomków #superpics, w tym dziecko, wnuka, prawnuk itd.

Tego

więcej jQuery "PC". znaczy ?

Ghanshyam Lakhani

Answer 23

Selektor potomków zwróci wszystkich potomków #superpics, w tym dziecko, wnuka, prawnuk itd.

Tego

Answer 24

więcej jQuery "PC". znaczy ?

Ghanshyam Lakhani

Answer 25

1

$("div", "#superpics").size();

Alexandros Ioannou
źródło

1

Dotyczy to wszystkich div potomków, nie tylko dzieci.

Felix Kling

Answer 26

1

Dotyczy to wszystkich div potomków, nie tylko dzieci.

Felix Kling

Answer 27

-1

Spróbuj tego dla bezpośrednich elementów potomnych typu div

$("#foo > div")[0].children.length

talent makhanya
źródło

Policz bezpośrednie podrzędne elementy div za pomocą jQuery

Odpowiedzi: