11548 sujets

JavaScript, DOM et API Web HTML5

[Jetpack] Sélecteur d'attribut vide : img[alt='']

Administrateur
Bonjour,

je m'essaie à Jetpack, l'extension parfaite pour les pas bons en JS comme moi !
Est-ce que vous verriez le problème dans mon code Jetpack dont l'équivalent fonctionne parfaitement en jQuery seul ?

Je n'arrive pas à sélectionner les images ayant 1) un attribut alt 2) vide sans sélectionner en même temps soit celles sans attribut alt (avec $("img[ alt='']", (le contexte) )), soit celles avec un attribut alt contenant qqch.
jetpack.statusBar.append({
        html: 'img[ alt] test',
        onReady: function(doc){
                $(doc).click(function(){
                        $("img[ alt]", jetpack.tabs.focused.contentDocument).each(function()
{
                                var alt = $(this).attr("alt");
                                if(alt==="")  {   $(this).css("border", "5px solid red"); }
                                else            {   $(this).css("border", "5px solid black");    }
                        });

                });
        }
});

En jQuery, c'est nickel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <title>Empty (existing) ALT outlined with jQuery</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){
        $("img[ alt]").each(function() {
                var alt = $(this).attr("alt");
                if(alt==="") {
                        $(this).css("outline", "3px dotted red");
                } else {
                        $(this).css("outline", "3px dotted blue");
                }
        });
});

        </script>
</head>
<body>
        <h1>jQuery : empty (existing) ALT outlined 3px wide</h1>
        <p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" /> - No alt attribute (invalid
element)</p>
        <p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="caption" /> - Alt on img
"caption"</p>
        <p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="" /> - Empty alt (decorative
image)</p>
</body>
</html>

Crosspost sur la liste Jetpack, pas de réponse pour l'instant

EDIT: haha, j'ai dû écrire [ alt] pour pas que ce soit transformé en smiley, comme d'hab'. Il faut bien entendu enlever ces espaces dans le code
Modifié par Felipe (27 Oct 2010 - 17:48)
Sujet clos
Aller à