DIV oberhalb einer Checkbox finden.

[Bernd]

Hallo,

ich habe folgendes HTML

<div>
	<p><input type="checkbox" 
            data-id="11847" 
            class="termin" 
            name="code[]" 
            value="1" 
            checked="">
    <a href="kalender.php?code=A00">Test Eintrag - Nr 1</a>
  </p>
    <p><span>Jobnummer:</span> XXX/XXX</p>
    <p><span>Zeitraum:</span> ganztägig</p>
        
    <div>Personal:</div>
    <div>
    	<span>Administrator</span>
    </div>
</div>

Jetzt habe ich folgende Funktion

success:function(d) {

                if( d.responseText == 'done' ) {
                    thisCheckbox.val( "1" );
                    thisCheckbox.next('span').addClass( 'done');
                        
                } else {
                    thisCheckbox.next( 'span' ).removeClass( 'done' );    
                }

                if( d.responseText == 'nein' ) {
                    thisCheckbox.val( "0" );
                    thisCheckbox.next('span').removeClass( 'done');
                        
                } 

            }

Ich möchte allerdings nicht das nächste span finden sondern möchte gerne an das erste DIV oberhalb der Checkbox kommen. Ist dieses überhaupt möglich?

[Bernd]

Meine Idee jetzt war so

if( d.responseText == 'done' ) {
                    thisCheckbox.val( "1" );
                    $('.container_termine').find(.data("kalenderID")  == terminid);
                    thisCheckbox.prev('div').addClass( 'done');
                        
                } else {
                    thisCheckbox.next( 'span' ).removeClass( 'done' );    
                }

                if( d.responseText == 'nein' ) {
                    thisCheckbox.val( "0" );
                    thisCheckbox.next('span').removeClass( 'done');
                        
                } 

Geht irgendwie nicht. Kann ich .find(.data) nicht miteinander verbinden?

[Felix Riesterer]

Lieber Bernd,

thisCheckbox.val( "1" );
thisCheckbox.next('span').addClass( 'done');

dieses thisCheckbox-Objekt ist offensichtlich ein jQuery-Objekt, da es die Methoden next und val kennt. Das ist kein Vanilla-JavaScript.

Mit Vanilla hätte ich spontan thisCheckbox.parentNode.parentNode notiert, da es ja eine Struktur <div><p><input/></p></div> ist und das <div> der Vor-Vorfahre der Checkbox ist. In jQuery geht das vielleicht mit thisCheckbox.parentsUntil("div") - aber das habe ich nicht geprüft.

Was mir an Deinem Markup nicht gefällt, ist das fehlende <label> um Deine Checkbox herum. Sie hat für mich so keine Bedeutung, weil unbeschriftet. Und überhaupt diese Divitis... Geht so ein Datensatz nicht semantischer in seiner Auszeichnung?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

.parentsUntil liefert die ganze Kette der Elternelemente bis zum div.

Hier im Beispiel würde das passen, im allgemeinen aber nicht.

Die richtige Funktion wäre wohl .closest.

Bernd, ich würde noch anmerken wollen, dass der Doppelpunkt in success:function()... zu viel ist, aber ich denke das ist nur beim übertragen ins Forum passiert...

Rolf

[Bernd]

Hallo,

Hier im Beispiel würde das passen, im allgemeinen aber nicht.

leider nein, jetzt wird mir das <p> von der checkbox markiert, ich muss aber noch eine Stufe hoch. closest schau ich mir gleich mal an und schau ob ich damit weiter komme.

dass der Doppelpunkt in success:function()... zu viel ist,

Das ist mir neu, ich habe nach success immer ein : geschrieben:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax

[dedlfix]

Tach!

Bernd, ich würde noch anmerken wollen, dass der Doppelpunkt in success:function()... zu viel ist, aber ich denke das ist nur beim übertragen ins Forum passiert...

Njein. Das success: definiert eine Eigenschaft im Settings-Objekt von jQuery.ajax(). Zu viel ist nur, es hier zu zeigen, weil nicht weiter relevant für das Problem.

dedlfix.

[Rolf B]

Hallo dedlfix,

autsch. Natürlich.

Rolf

[Bernd]

Danke, mit closest funktioniert es

success:function(d) {

  if( d.responseText == 'done' ) {
    thisCheckbox.val( "1" );
    thisCheckbox.closest("div").addClass( 'done');;
                        
  } else {
    thisCheckbox.closest("div").removeClass( 'done' );    
  }

  if( d.responseText == 'nein' ) {
    thisCheckbox.val( "0" );
    thisCheckbox.closest("div").removeClass( 'done');
                        
  } 

}

Hätte es auch nicht irgendwie so gehen müssen?
https://forum.selfhtml.org/self/2019/jun/21/div-oberhalb-einer-checkbox-finden/1750874#m1750874

[Felix Riesterer]

Lieber Bernd,

if( d.responseText == 'done' ) { ... } else {
  // response != done
}

if( d.responseText == 'nein' ) {
  // response != done
} 

ist das absichtlich doppelt gemoppelt?

Hätte es auch nicht irgendwie so gehen müssen?
https://forum.selfhtml.org/self/2019/jun/21/div-oberhalb-einer-checkbox-finden/1750874#m1750874

Nö, hätte es nicht. Wenn es eine bekannte ID gibt, kann man natürlich mit dieser selektieren, aber von einer solchen ist in Deinem OP nichts bekannt.

Liebe Grüße

Felix Riesterer

[Bernd]

Hallo,

Nö, hätte es nicht. Wenn es eine bekannte ID gibt, kann man natürlich mit dieser selektieren, aber von einer solchen ist in Deinem OP nichts bekannt.

diese habe ich mal hinzugefügt

data-kalenderID="<?php echo htmlspecialchars($array['id']); ?>"

[Felix Riesterer]

Lieber Bernd,

diese habe ich mal hinzugefügt

wenn es denn sein muss... :-/

data-kalenderID="<?php echo htmlspecialchars($array['id']); ?>"

Na, dann kannst Du ja mit $('data-kalenderID["..."]') Dein <div> selektieren. Anstelle der Ellipsis notierst Du dann eben den passenden Wert - vielleicht auch mittels einer Variable: $('data-kalenderID["' + myID + '"]')

Liebe Grüße

Felix Riesterer