• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bestimmtes element auswählen (selected)

B

burn4ever

Mitglied
Hallo,
ich habe eine Liste mit Radiobuttons bei welcher immer der erste Button selected ist. Nun kann es aber sein das bei einer bestimmten Aktion, gewissen Elementen (Radiobuttons) eine Klasse (.not-visible) vergeben wird welche die die Eigenschaft display:none hat.
Was passieren kann ist, das der selected Button auch diese Klasse bekommet und ich ein ausgewähltes Elemente habe was aber nicht sichtbar ist.

Kann ich Mittels JavaScript eine Funktiontion ausführen welche das erste Element selected welches nicht die Klasse .not-visible hat?

Ich dachte da an so was (jQuery):
PHP: 
$('#list li:not(.not-visible):first-child').trigger('click');
 
Das ist etwas tricky, weil es hier nicht um das first-child eines DOM-Elements geht, sondern um das erste Element, welches eine bestimmte Eigenschaft nicht besitzt.

Mein erster Gedanke wäre, die Listenelemente durch eine Schleife zu schieben und mit der Umkehrfunktion von hasClass() zu prüfen. Das Ergebnis wird in einem Array gesammelt und dem ersten Element dieses Arrays dann eine Eigenschaft zugewiesen.
 
Gerade mal ausprobiert. Mit den Funktionen first() und not() geht es auch ohne Schleife:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Foobar</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <form id="radiolist" action="">
        <input type="radio" name="radiobutton" value="button1"  class="hideMe" />Button 1 <br />
        <input type="radio" name="radiobutton" value="button2" />Button 2 <br />
        <input type="radio" name="radiobutton" value="button3" />Button 3 <br />
        <input type="radio" name="radiobutton" value="button4" />Button 4 <br />
        <input type="radio" name="radiobutton" value="button5" />Button 5 <br />
    </form>
    
    <script type="text/javascript">
        $("input[name='radiobutton']").not('.hideMe').first().attr('checked', 'checked');
    </script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben