Z powodów związanych z wydajnością próbuję znaleźć sposób na wybranie tylko węzłów rodzeństwa wybranego węzła.
Na przykład,
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<div id="inner4"></div>
</div>
Jeśli wybrałem węzeł inner1, czy jest sposób, aby uzyskać dostęp do jego rodzeństwa, inner2-4
węzłów?
javascript
dom
siblings
codingbear
źródło
źródło
Spowoduje to zwrócenie rodzeństwa natychmiast po nim lub zerowanie, gdy rodzeństwo nie będzie już dostępne. Podobnie możesz użyć
previousSibling
.[Edytuj] Po namyśle nie da to następnego
div
tagu, ale białą spację po węźle. Wydaje się, że lepiejIstnieje również plik
previousElementSibling
.źródło
Szybki:
https://codepen.io/anon/pen/LLoyrP?editors=1011
Pobierz dzieci rodzica jako tablicę, odfiltruj ten element.
Edytować:
I odfiltrować węzły tekstowe (dzięki pmrotule ):
źródło
[ ...n.parentNode.children ].filter(c => c.nodeType == 1 && c != n)
Od 2017:
prosta odpowiedź:
element.nextElementSibling
aby uzyskać odpowiedni element dla rodzeństwa. też maszelement.previousElementSibling
na poprzednistąd łatwo jest uzyskać kolejne rodzeństwo
źródło
next
lubprevious
. Dokładne określenie ruchu wstecz lub do przodu nie pomaga w tym przypadku.czy sprawdziłeś metodę „Sibling” w jQuery?
n.nodeType == 1 sprawdza, czy element jest węzłem html i n! == wyklucza bieżący element.
Myślę, że możesz użyć tej samej funkcji, cały ten kod wydaje się być zwykłym javascriptem.
źródło
Można to zrobić na kilka sposobów.
Jedna z poniższych czynności powinna załatwić sprawę.
FYI: Baza kodu jQuery jest świetnym źródłem do obserwacji Javascript klasy A.
Oto doskonałe narzędzie, które odsłania kod bazowy jQuery w bardzo uproszczony sposób. http://james.padolsey.com/jquery/
źródło
Oto, jak możesz zdobyć poprzednie, następne i całe rodzeństwo (obie strony):
źródło
Zastosowanie document.querySelectorAll () i pętli i iteracji
źródło
jQuery
Native - najnowsze, Edge13 +
Natywny (alternatywny) - najnowszy, Edge13 +
Natywny - IE10 +
źródło
źródło
1) Dodaj wybraną klasę do elementu docelowego
2) Znajdź wszystkie dzieci elementu nadrzędnego z wyjątkiem elementu docelowego
3) Usuń klasę z elementu docelowego
źródło
Następująca funkcja zwróci tablicę zawierającą wszystkie elementy rodzeństwa danego elementu.
Po prostu przekaż wybrany element do
getSiblings()
funkcji jako jedyny parametr.źródło
źródło