jQuery - Attributen controleren of vullen


Met jQuery kun je eenvoudig attributen controleren en eventueel bijvoorbeeld zelf invullen of vervangen. In het onderstaande voorbeeld wordt een link bijvoorbeeld voorzien van een nieuwe link en een invoerveld wordt voorzien van tekst. In de tweede code wordt er gekeken of een attribuut is gevuld en op basis hiervan kan er een actie ingesteld worden. Enkele andere voorbeelden zoals het pakken van de URL van een pagina hieronder.

Waarde attribuut

Haal de waarde van een attribuut op.

$(document).ready(function() {
        var currentId = $('a').attr('rel');
});

Attribuut vullen

Vul een attribuut met een bepaalde waarde.

$(document).ready(function() {
        $('a').attr('href', 'http://www.google.nl');
        $('input').attr('value', 'Tekst');
});

Controleren attribuut gevuld is

Controleer of een attribuut gevuld is, bijvoorbeeld of een link is ingevuld.

$(document).ready(function() {
        if ($('a.link').attr('href') !== '') {
                alert('Gevuld');
        } else {
                alert('Leeg');
        }
});


In het geval van de eerste code hierboven controleer je een specifiek aangegeven link, in het geval van het tweede stukje code controleer je bijvoorbeeld alle links op een pagina.

$(document).ready(function() {
        $('a').each(function(){
                if ($(this).attr('title') !== "") {
                        alert('Gevuld');
                } else {
                        alert('Leeg');
                }
        });
});

Titel en URL pagina

Met de onderstaande codes wordt zowel de titel van een pagina gepakt als de URL. Daarna wordt in dit geval de titel toegevoegd evenals de URL toegevoegd aan een element om te tonen op een pagina maar hier kun je ook andere dingen mee doen.

$(document).ready(function() {
        var href = $(location).attr('href');
        $(".element").append(href);

        var title = $(this).attr('title');
        $(".element").append(title);
});

Pad afbeelding

Met de onderstaande codes wordt het pad van een afbeelding gepakt.

$(document).ready(function() {
        var image = $('.image').attr('src');
        $(".element").append(image);
});


Een alternatieve manier.

$(document).ready(function() {
        var pageimage = $('#main').find('img:first').map(function(){
        return this.src;
        }).get();
        alert(pageimage);
});