Προσθήκη div σε συγκεκριμένο σημείο με jquery

[rafinos]

Γεια σας παιδιά.

 

Έστω ότι έχω τα παρακάτω divs.

<div class="element">bla</div>
<div class="sub_element">bla1</div>
<div class="sub_element">bla2</div>
<div class="sub_element">bla3</div>
<div class="sub_element">bla4</div>
<div class="element">blaa</div>
<div class="element">blaaa</div>
<div class="element">blaaaa</div>
<div class="element">blaaaaa</div>
<div class="sub_element">blaaaaa1</div>
<div class="sub_element">blaaaaa2</div>
<div class="sub_element">blaaaaa3</div>
<div class="sub_element">blaaaaa4</div>
<div class="element">blaaaaaa</div>

Αν εγώ θέλω να προσθέσω δυναμικά ένα <div class="sub_element">...</div> κάτω από ένα class="element" με βάση το text() του div, αλλά αυτό να πάει κάτω από τα συνεχόμενα sub_elements πως το κάνω;

 

Για παράδειγμα αν έχω το παρακάτω if

if($(".element").text() === "bla")

πως μπορώ να προσθέσω <div class="sub_element">...</div> ακριβώς μετά το bla4; (να τονίσω πως δεν γνωρίζω τα text() των sub_elements, ενώ η παραπάνω διάταξη είναι τελείως τυχαία.  

 

 

[DeadElectron]

Υπάρχει κάποιος λόγος που τα sub_elements δεν είναι παιδιά του element;

[defacer]

http://api.jquery.com/append/

[rafinos]

@defacer: Με το append() δεν θα προστεθει τερμα τερμα κατω; Απο οσο ξερω γινεται add το κομματι κωδικα που θες στο τελος του parent element ετσι δεν ειναι;

 

@DeadElectron Γενικα ολο το σχημα ειναι περιεργο και δημιουργειται δυναμικα εξ αρχης. Θα βολευε καλυτερα λες να εχω μεσα στο element ενα main_element και πολλα sub;

[DeadElectron]

@DeadElectron Γενικα ολο το σχημα ειναι περιεργο και δημιουργειται δυναμικα εξ αρχης. Θα βολευε καλυτερα λες να εχω μεσα στο element ενα main_element και πολλα sub;

 

Αν είχες html της μορφής: 

<div class="element">
    bla
    <div class="sub_element">bla1</div>
    <div class="sub_element">bla2</div>
    <div class="sub_element">bla3</div>
    <div class="sub_element">bla4</div>
</div>

τότε με τη χρήση του .append: 

$('.element').append('<div class="sub_element">bla5</div>');

θα είχες το επιθυμητό αποτέλεσμα.

 

Με το να είναι όλα τα elements siblings γίνεται λίγο πιο δύσκολο αυτό που ζητάς, χωρίς ουσιαστικό λόγο.

[defacer]

@defacer: Με το append() δεν θα προστεθει τερμα τερμα κατω; Απο οσο ξερω γινεται add το κομματι κωδικα που θες στο τελος του parent element ετσι δεν ειναι;

 

Έχεις δίκιο, μι σκούζι. Αλλά πάλι γίνεται εύκολα, ψάξε τις tree traversal methods. Πχ αν $this είναι το "parent" σου,

 

$this.nextUntil('.element').last().after(what_you_want_to_insert);

[rafinos]

 

Έχεις δίκιο, μι σκούζι. Αλλά πάλι γίνεται εύκολα, ψάξε τις tree traversal methods. Πχ αν $this είναι το "parent" σου,

 

$this.nextUntil('.element').last().after(what_you_want_to_insert);

Είναι η πρώτη φορά που θα χρησιμοποιήσω την άλλη λύση που προτάθηκε γιατί η δική σου θέλει δοκιμές.

 

Νομίζω πως απλά είναι κάπως ποιο νορμάλ να ομαδοποιήσω λίγο διαφορετικά τα divs.

 

Αν δεν τα καταφέρω θα επανέλθω.

 

Σας ευχαριστώ πολύ!

[alou]

http://api.jquery.com/after/

[defacer]

Είναι η πρώτη φορά που θα χρησιμοποιήσω την άλλη λύση που προτάθηκε γιατί η δική σου θέλει δοκιμές.

 

Νομίζω πως απλά είναι κάπως ποιο νορμάλ να ομαδοποιήσω λίγο διαφορετικά τα divs.

 

Αν δεν τα καταφέρω θα επανέλθω.

 

Σας ευχαριστώ πολύ!

 

Η λύση του DeadElectron είναι πολύ λογικότερη, απλά προϋποθέτει αλλαγή του markup. Αν μπορείς να το αλλάξεις και δε συντρέχουν άγνωστοι λόγοι για τους οποίους πρέπει να το κρατήσεις έτσι τότε σαφώς να το κάνεις με κείνο τον τρόπο που είναι πιο "φυσικός": η physical διάταξη των στοιχείων είναι πιο κοντά στη logical διάταξή τους.

 

Anyway, ελπίζω να έμαθες κάτι από όλες τις απαντήσεις.