OVH Cloud OVH Cloud

Transformer du code html?

22 réponses
Avatar
yamo'
Bonsoir,

J'aurai besoin de transformer cette structure :

<ul>
<li><a href="lien1">titre1</a></li>
<li><a href="lien2">titre2</a></li>
...
</ul>

en :
<select>
<option value="lien1">titre1</option>
<option value="lien2">titre2</option>
...
</select>


J'aurai aimé obtenir directement la listbox mais pour une raison
incompréhensible, dans une view drupal6 je n'y arrive pas par contre, la
liste <ul><li> pas de problème!


Est-ce possible et comment?

Merci d'avance,

--
Stéphane
http://pasdenom.info/fortune

10 réponses

1 2 3
Avatar
Yamo'
Salut,
Le 22/06/2009 16:13, Yamo' a écrit:




Mais je vais avoir besoin de cette manipulation plusieurs fois aussi je
vais passer par les ID mais je n'arrive pas à modifier ton code :(

L'ID qui m'intéresse c'est
"block-views-99a54984bb3584d5e9dbae4bd4bb1a0b" et donc le h3 pour cré er
le premier option puis les <ol> <li>



J'ai commencé en ajoutant au code de SAM :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b ').firstChild;

mais quand je fais :
y = z.getElementsByTagName('H3')[0];

Firefox me dit Erreur : z.getElementsByTagName is not a function!

--
Stéphane
Avatar
Yamo'
Le 22/06/2009 16:28, Yamo' a écrit:

Firefox me dit Erreur : z.getElementsByTagName is not a function!




J'ai réussit autrement :

<script type="text/javascript">
function changeUlToSelect() {

// Formations
var s, l, o, h,
z=document.getElementById("block-views-99a54984bb3584d5e9dbae4bd4bb1a0b ");

var u = z.getElementsByTagName('OL');

for(var i=0, n=u.length; n>i; i++) {
s = document.createElement('SELECT');

o = new Option('Nos formations', '#');
s[s.length] = o;



l = u[i].getElementsByTagName('LI');
for(var j=0, z=l.length; z>j; j++) {
h = l[j].getElementsByTagName('A')[0];
o = new Option(h.text, h.href);
s[s.length] = o;
}
s.onchange=function() {
// alert(this.options[this.selectedIndex].value);};
document.location=this.options[this.selectedIndex].value;};
u[i].parentNode.replaceChild(s, u[i]);
}
}
</script>

Merci beaucoup SAM :)
Avatar
Olivier Miakinen
Le 22/06/2009 16:28, Yamo' a écrit :

J'ai commencé en ajoutant au code de SAM :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b').firstChild;

mais quand je fais :
y = z.getElementsByTagName('H3')[0];

Firefox me dit Erreur : z.getElementsByTagName is not a function!



Tu as vérifié que z existe et est non nul ? Si ça se trouve, le
firstChild est du simple texte, auquel cas tu peux essayer :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b');
Avatar
SAM
Le 6/22/09 4:28 PM, Yamo' a écrit :
Salut,
Le 22/06/2009 16:13, Yamo' a écrit:




Mais je vais avoir besoin de cette manipulation plusieurs fois aussi
je vais passer par les ID mais je n'arrive pas à modifier ton code :(

L'ID qui m'intéresse c'est
"block-views-99a54984bb3584d5e9dbae4bd4bb1a0b" et donc le h3 pour
créer le premier option puis les <ol> <li>



J'ai commencé en ajoutant au code de SAM :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b').firstChild;


mais quand je fais :
y = z.getElementsByTagName('H3')[0];

Firefox me dit Erreur : z.getElementsByTagName is not a function!



et il n'a pas gueulé pour 'z' ?

if(z)
var y = z.getElementsByTagName('H3');
if(y &&
y.length>0)
y = y[0];

et voir à quelle ligne Fx gueule à l'erreur

ce doit être à la ligne : if(y &&

Pourquoi ?

pasque le firstChild de 'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b'
à tous les coups c'est rien (dans Fx en tous cas)
juste un nodeText de retour à la ligne ou un truc du genre
... en tous cas il n'y aura pas de H3 à y trouver

Faire :

if(z)
alert('nom du noeud = '+z.nodeName +
'nvaleur = '+z.nodeValue);

pour voir à voir.

Tu n'as, normalement pas besoin d'entrer dans le div contenu par
'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b'
Tous les OL des sous-divs de
'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b' seront récupérés par :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b');
u = z.getElementsByTagName('ol');

--
sm
Avatar
SAM
Le 6/22/09 4:13 PM, Yamo' a écrit :
Salut,

Le 22/06/2009 13:58, SAM a écrit:
Comme dit par ailleurs : à ne pas utiliser !



Je sais qu'il y a certainement plus logique et plus élégant comme
solution mais ça fonctionne...

De plus pour les navigateurs sans javascript, il a le <ol> <li>
fonctionnel!

Voici comment j'ai modifié ton code qui me sauve temporairement, je me
suis trompé ce n'est pas des <ul> mais des <ol>:

<script type="text/javascript">
function changeUlToSelect() {
var s, l, o, h,
u = document.getElementsByTagName('OL');



Bravo! c'est bien, tu as tout compris ;-)

Mais je vais avoir besoin de cette manipulation plusieurs fois aussi je



ben ... pourquoi plusieurs fois ?
ça va modifier tous les OL de la page d'un seul coup !

vais passer par les ID mais je n'arrive pas à modifier ton code :(



Pourtant c'est facile :
- le recopier au crayon sur un papier
- utiliser une gomme pour gommer
;-)

function changeUlToSelect() {
var s, l, o, h,
u = 'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b';
u = document.getElementById(u);
u = u.getElementsByTagName('OL');
... et la suite ...

ou :

function changeUlToSelect(idDiv) {
var s, l, o, h,
u = document.getElementById(idDiv);
u = u.getElementsByTagName('OL');

avec, par exemple :
onclick="changeUlToSelect('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b');"


L'ID qui m'intéresse c'est
"block-views-99a54984bb3584d5e9dbae4bd4bb1a0b" et donc le h3 pour créer
le premier option puis les <ol> <li>



Hein ? maintenant faut changer le H3 en option ?
Mais ou est z-y donc le select alors ?

On n'a pas le droit de mettre un select dans une suite d'options.

Voir à voir à utiliser les groupes d'options ?
<http://fr.selfhtml.org/html/reference/elements.htm#optgroup>
<http://fr.selfhtml.org/html/formulaires/choix.htm#Listes_imbriquees>

Voici le code HTML :
<div id="block-views-99a54984bb3584d5e9dbae4bd4bb1a0b"
class="block block-views odd footer_block">
<div class="block-inner">
<h3 class="title block-title">Formations</h3>
<div class="content">
<div class="view view-block-titres-liens-formations
view-id-block_titres_liens_formations view-display-id-block_1
view-dom-id-1">
<div class="view-content">
<div class="item-list">
<ol>
<li class="views-row views-row-1 views-row-odd views-row-first">
<span class="views-field-title">
<span class="field-content">
<a class="active" alt="Formation BIRT" title="Formation BIRT"
href="/fr/content/formation-birt">Formation BIRT</a>
</span>
</span>
</li>



He ben ! Bravo pour le code pondu par ce magnifique dupral
pas étonnant que ça lambine à afficher avec une telle arborescence tout
autant inutile qu'inutile sauf à se servir de la multitude de class css
dont auxquelles on se demande qui a bien pu imaginer du si tordu.

Au pal le dupral !
(et en plus ça a un nom de médicament ! tout s'esplique)

et que devient-ce toutes ces formidables class delamortkitue ? (*)

Je subodore qu'il faut se servir de jQuery pour retrouver par leur(s)
class(es) les éléments à traiter.
Juste histoire d'alourdir un peu, tant qu'on y est.
(sauf à ce que jQuery soit déjà appelé d'office et systématiquement ?)


(*) et ils nous ont bien dit de faire afficher le code html pour voir à
quoi correspondent les css ?
Mais comment un humain peut-il s'y retrouver là dedans ?
Avatar
Yamo'
Salut,
Le 22/06/2009 17:24, SAM a écrit:

Tu n'as, normalement pas besoin d'entrer dans le div contenu par
'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b'
Tous les OL des sous-divs de
'block-views-99a54984bb3584d5e9dbae4bd4bb1a0b' seront récupérés p ar :
z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1 a0b');
u = z.getElementsByTagName('ol');



J'ai testé sur seamonkey 1.1, Firefox 3.5, Opera 9, Safari 3 et ça ne
fonctionne pas sur IE6,7 et 8 :(

Internet Explorer me dit 'null' a la valeur Null ou n'est pas un objet.

Mon précédent message a l'air d'être resté sur groumpf, je repose la
fonction :

<script type="text/javascript">
function changeUlToSelect() {

// Formations
var s, l, o, h,
z=document.getElementById("block-views-99a54984bb3584d5e9dbae4bd4bb1a0b ");

var u = z.getElementsByTagName('OL');

for(var i=0, n=u.length; n>i; i++) {
s = document.createElement('SELECT');

o = new Option('Nos formations', '#');
s[s.length] = o;






l = u[i].getElementsByTagName('LI');
for(var j=0, z=l.length; z>j; j++) {
h = l[j].getElementsByTagName('A')[0];
o = new Option(h.text, h.href);
s[s.length] = o;
}
s.onchange=function() {
// alert(this.options[this.selectedIndex].value);};
document.location=this.options[this.selectedIndex].value;};
u[i].parentNode.replaceChild(s, u[i]);
}
}
</script>

--
Stéphane
Avatar
SAM
Le 6/22/09 5:51 PM, Yamo' a écrit :
Salut,
Le 22/06/2009 17:24, SAM a écrit:

z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4bb1a0b');

u = z.getElementsByTagName('ol');



J'ai testé sur seamonkey 1.1, Firefox 3.5, Opera 9, Safari 3 et ça ne
fonctionne pas sur IE6,7 et 8 :(

Internet Explorer me dit 'null' a la valeur Null ou n'est pas un objet.



Où ? à quelle ligne ?

c'est peut-être : h.text
ici :
o = new Option(h.text, h.href);

Bon, testé IE.6 :
<http://cjoint.com/?gwsSPapcI0>

--
sm
Avatar
Yamo'
Salut,
Le 22/06/2009 18:48, SAM a écrit:
Le 6/22/09 5:51 PM, Yamo' a écrit :
Salut,
Le 22/06/2009 17:24, SAM a écrit:

z=document.getElementById('block-views-99a54984bb3584d5e9dbae4bd4b b1a0b');

u = z.getElementsByTagName('ol');



J'ai testé sur seamonkey 1.1, Firefox 3.5, Opera 9, Safari 3 et ça ne
fonctionne pas sur IE6,7 et 8 :(

Internet Explorer me dit 'null' a la valeur Null ou n'est pas un objet .



Où ? à quelle ligne ?

c'est peut-être : h.text
ici :
o = new Option(h.text, h.href);

Bon, testé IE.6 :
<http://cjoint.com/?gwsSPapcI0>




C'est à devenir dingue ton exemple fonctionne mais pas quand je le copi e
colle dans mon code!

<http://cjoint.com/confirm.php?cjoint=gwtgs1j0aZ>
Bon on verra demain!

--
Stéphane
Avatar
SAM
Le 6/22/09 7:07 PM, Yamo' a écrit :
Salut,

Bon, testé IE.6 :
<http://cjoint.com/?gwsSPapcI0>




C'est à devenir dingue ton exemple fonctionne mais pas quand je le copie
colle dans mon code!



Attention aux retours de ligne non voulus !

<http://cjoint.com/confirm.php?cjoint=gwtgs1j0aZ>
Bon on verra demain!



Faut peut-être mieux analyser le dit code ?


--
sm
Avatar
Yamo'
Salut,

Le 22/06/2009 19:14, SAM a écrit:

Faut peut-être mieux analyser le dit code ?



à tête reposée j'ai trouvé l'erreur :

J'ai changé la ligne
o=new Option(d.getElementsByTagName('H3')[0].firstChild.nodeValue);
en :
o = new Option('Nos formations','#');

Merci beaucoup :)


--
Stéphane
1 2 3