11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
débutant le jquery, je me demande si il est possible de séléctionner un div par sa class

 $(".title")


puis passer une action sur un header comme h2 contenu dans ce même div?

 $(this).("h2").css('visibility', 'visible');



l'html étant :


<div class="title"><h1>TitreToujoursVisible</h1> <h2>TitreSuite</h2></div>





sinon


next("h2") sélectionne le div suivant pas celui dans lequel s'est fait la sélection
 $(this).next("h2").css('visibility', 'visible');





Smiley confus
Modifié par jeanjeanjean (20 Feb 2009 - 12:27)
Bonjour,

Avec jQuery tu peux utiliser les sélecteurs CSS 1 et CSS 2 et partiellement CSS3 donc pour ton cas tu peux écrire :

 $(".title h2").css('visibility', 'visible');


$(".title h2") va sélectionner les headers h2 descendant d'un élément qui a la classe 'title' ,comme dans une feuille de style.

Plus d'infos sur les Sélecteurs CSS

dunjl
Modifié par dunjl (19 Feb 2009 - 16:32)
oui, merci

mais dans ce cas particulier j'aimerais sélectionner uniquement le h2 à l'intérieur de mon div ayant la class title (pas tout les h2 de la classe title) :

  $('.title').click(function() {    
$("this").????("h2").css('visibility', 'visible');
}



ou vulgairement

   $(this h2).css('visibility', 'visible');

Modifié par jeanjeanjean (19 Feb 2009 - 19:08)
Salut,

Que veux tu faire précisément ? sélectionner ton header h2 et lui appliquer un style ou cliquer sur le div et appliquer un style au header h2.

Pour le clic sur le div, tu peux le faire de cette manière

$('.title').click(function() {
    $("h2", $(this)).css('visibility', 'visible');
}


ou bien


$('.title').click(function() {
   	$(this).children("h2").css('visibility', 'visible');
});


bonne journée

dunjl
salut,
je cherche à faire apparaître le header h2 d'une manière ou d'une autre, au moment où l'on clique sur le div le contenant:

Voilà la page sur laquelle je m'exerce

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>test</title>
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script type="text/javascript">
            
            $(document).ready(function(){
            
            
                $("h2").hide();
                
                
                $('.titleR').click(function(){
                    $(this).children("h2").show();
                    
                });
                
            });
        </script>
    </head>
    <body>
        <div class=".titleR">
            Paris<h2>Capitale de la France</h2>
        </div>
        <div class=".titleR">
            Berlin<h2>Capitale de l'Allemagne</h2>
        </div>
        <div class=".titleR">
            London<h2>Capitale de l'Angleterre</h2>
        </div>
    </body>
</html>




lorsque je clique sur Paris, j'aimerais que Capitale de la France apparaissent à côté...
Ah ben c'est mieux avec le code en entier Smiley cligne

Le problème n'est pas dans le script mais dans le HTML :

<div class="titleR">


Quand tu écris $(".titleR") cela sélectionne les éléments qui ont la classe "titleR" , or dans ton HTML tu as spécifié tes divs avec une classe nommée ".titleR"
coooool, je m'étais rendu compte que dans mon autre fichier, l'erreur ne perdurait pas, mais sans savoir d'où cela venait...

Smiley langue

bien vu ! merci bcp
Modifié par jeanjeanjean (20 Feb 2009 - 12:26)