Ich habe eine Funktion, mit der ich Elemente auf einer Seite mit der Klasse equalheight mit derselben Höhe (der Höhe des höchsten Elements) erstellen kann:
Das Problem, zu dem ich renne, ist, dass ich zwei Reihen von Boxen habe. Die erste Zeile möchte ich alle gleich hoch haben, also gebe ich ihnen die Klasse equalheight . Okay. Gut. Nun möchte ich auch, dass die zweite Reihe von Kästen alle die gleiche Höhe hat, aber nur die Kästchen in der zweiten Reihe.
Gibt es eine Möglichkeit, diesen Code so zu ändern, dass ich die gleiche Höhe für mehrere Elementgruppen festlegen kann? Zum Beispiel, vielleicht etwas wie das Setzen der Klasse als equalheight1 , equalheight2 , etc.?
EDIT: Eine Sache, über die ich nachgedacht habe, war, jedem Element ein Datenattribut hinzuzufügen und nur das höchste Element für jedes Element mit demselben Datenattribut zu berechnen. Wie:
%Vor% Wir durchlaufen alle Elemente und fügen sie den Spalten currentRow hinzu und aktualisieren die maximale Höhe. Wenn wir ein Element erreichen, dessen Oberkante sich von der vorherigen unterscheidet, aktualisieren wir alle Höhen von currentRow Spalten und setzen dann currentRow auf eine neue, und nach dem Verlassen der Schleife aktualisieren wir die Höhe der letzten Zeilenspalten.
Hier ist eine Geige dafür.
Soweit ich das sagen kann, sollten Sie in der Lage sein, jeder Zeile eine andere Klasse zu geben und einfach die Funktion in jeder Zeile auszuführen;
%Vor% Obwohl, wenn man sich den Code genauer anschaut, scheint er sich selbst darum zu kümmern (mit dem currentRow Zeug).
Bearbeiten: Sie haben nicht , um jeder Zeile eine andere Klasse zu geben, tun Sie das einfach;
%Vor%Und die Funktion sollte in jeder Zeile einzeln ausgeführt werden.
Sie können den DIVs, die Sie gruppieren möchten, eine zweite Klasse hinzufügen. Etwas wie:
%Vor%Und dann in Ihrem Javascript:
%Vor%Einer der effizientesten Wege, um das zu erreichen, was Sie wollen, ist, Ihre Aufgabe in zwei Funktionen aufzuteilen.
JS:
%Vor%In HTML würden alle Boxen die gleiche Klasse haben. Zum Beispiel:
%Vor%JSFiddle: Ссылка
Ich gehe vielleicht ein bisschen zu weit außerhalb Ihrer Tiefe, aber wenn Sie jQuery verwenden, warum nicht ein solches Plugin erstellen?
Ich werde die gleiche name attribute-Methode verwenden, die von Chris Dobson vorgeschlagen wurde
Ich habe auch diese Frage gestellt um in deiner Antwort zu helfen;)
Möchte jemanden dazu bringen, es zu überprüfen. Ich werde es auch testen.
Fügen Sie ein Attribut wie name * eine neue Klasse zu den Elementen hinzu - Optionsschaltflächen verwenden eine ähnliche Methode mit dem Element name , um festzustellen, welche Schaltflächen gruppiert sind.
Sie können dann wählen Sie durch die equalheight -Klasse und die neue Klasse zB. equal1 , um nur die Elemente einer Gruppe auszuwählen und jede Gruppe separat zu behandeln.
dann in Ihrem JavaScript:
%Vor% * In meiner ersten Antwort wurde das Attribut name und jQuery attributeEquals vorgeschlagen, das Attribut name ist jedoch nicht für Elemente div geeignet. Ein alternativer Ansatz besteht darin, die data-* -Attribute von HTML5 zu verwenden, und es gibt ein Argument dafür, dass dies korrekt ist, aber eine neue Klasse schien geeigneter (siehe meinen Kommentar unten für mehr).
Tags und Links javascript jquery