JQuery ferme automatiquement les balises et ca m'énèrve

**gael** · 20/10/2009, 14h25

bonjour,

je voudrais encapsuler des div au centre d'un tableau afin de lui ajouter une bordure.

Je pensais que cela serait simple avec jquery en faisant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
before= "
<table cellpacing='0' cellpadding='0'>
	<tr>
		<td>
			<img src='Files/25284/coin-sup-left.png'>
		</td>
		<td class='bordSup'>
		</td>
		<td>
			<img src='Files/25284/coin-sup-right.png'>
		</td>
	</tr>	
	<tr>
		<td class='bordLeft'>
		</td>
		<td>";
 
after=	"</td>
		<td class='bordRight'>
		</td>
	</tr>
	<tr>
		<td>
			<img src='Files/25284/coin-inf-left.png'>
		</td>
		<td class='bordSup'>
		</td>
		<td>
			<img src='Files/25284/coin-inf-right.png'>
		</td>
	</tr>
</table>";
 
$('.borders').prepend( before);
$('.borders').append(after);

mais voila, jquery doit considérer que j'ai oublié de fermer la balise dans before et que j'ai des balises fermantes superflues dans after, puisqu'il en ajoute dans le premier cas et les supprime dans le second.

Puis je me suis dit que jquery n'etaiit pas forcément nécessaire, j'ai donc reconstruit la fonction qui permet de trouver les div ayant une classe définie:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
divs= document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
   if(divs[i].className=='borders') {
       divs[i].innerHTML= before + divs[i].innerHTML + after;
       divs[i].className='';
     }
}

mais maintenant le code n'est plus évalué alors que cela m'est nécessaire.

Auriez-vous une idée pour débloquer la situation?
merci

**danielhagnoul** · 20/10/2009, 22h46

Bonsoir.

En effet $(...) construit un élément du DOM et pour qu'il soit valide jQuery intervient.

La seule solution que j'ai trouvée (j'en ai essayé plusieurs) est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
            var before= "<tbody><tr><td><img src='Files/25284/coin-sup-left.png'/></td><td class='bordSup'>&nbsp;</td><td><img src='Files/25284/coin-sup-right.png'/></td></tr><tr><td class='bordLeft'>&nbsp;</td><td>";
 
            var after = "</td><td class='bordRight'>&nbsp;</td></tr><tr><td><img src='Files/25284/coin-inf-left.png'/></td><td class='bordSup'>&nbsp;</td><td><img src='Files/25284/coin-inf-right.png'/></td></tr></tbody>";
 
        $(document).ready(function(){
            var division = $("div.borders").html();
            $("div.borders").remove();
            $("<table>" + before + "<div class='borders'>" + division + "</div>" + after + "</table>").appendTo("body");
        });
    </script>
</head>
<body>
    <div class="borders">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
        </p>
    </div>
</body>
</html>

**gael** · 20/10/2009, 22h58

merci pour ta reponse, elle va bien m'aider

. bonne soirée

JQuery ferme automatiquement les balises et ca m'énèrve

jQuery

Vue hybride

Discussions similaires

Partager

Partager