Discussion :

[Invité]

Bon...
Vu que tu n'apportes pas plus d'explications...

Pour récupérer l'INDEX du <li> cliqué :

Code HTML :

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

1
2
3
4
5
6
  <ul id="maliste" class="dropdown-menu">
   <li data-value="123" onclick="test(this)">0</li>
   <li data-value="456" onclick="test(this)">1</li>
   <li data-value="789" onclick="test(this)">2</li>
   <li data-value="000" onclick="test(this)">3</li>
  </ul>

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
// ---------
function test(elt)
{
  // 1- VALEUR
  var val = elt.dataset.value; // récupération du data-value
  console.log( val );
 
  // 2- INDEX
  var index = getNodeindex(elt);
  console.log( index );
}
// ---------
// Récupérer l'INDEX d'un élément (noeud)
function getNodeindex( elt ){ 
  var c = elt.parentNode.children, i = 0;
  for(; i < c.length; i++ ){
    if( c[i] == elt ) return i;
  }
}
// ---------

[dominos]

ça me retourne "undefined"... ce que je cherche c'est à récupérer le numéro de l'élément cliqué dans une liste <ul id="maliste"><li></li>..., de 0 à n...


ça fonctionne si je met un id dans chaque balise <li> en plus de l'id <ul> mais ce qui m'intéresse, c'est de savoir si on peut faire la même chose sans id <li> juste par en passant l'id de <ul>

Code :

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

ul.getElementsByTagName('li')[elm.id].getAttribute('data-value'));

pour le voir fonctionner, il faut attribuer l'id <li> à partir de 0, 1, etc.

Comment récuperer ce numéro d'élement sans l'id du genre ?

Code :

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

ul.getElementsByTagName('li')[elm.????].getAttribute('data-value'));

[Invité]

• Montre un VRAI EXTRAIT du code HTML !
• De plus, il faut un évènement pour déclencher l'action : click ? sur quoi ?

Le code que j'ai donné précédemment fonctionne SANS id, avec une fonction test() !

[dominos]

Ce code fonctionne, mais ce que je cherche à savoir c'est s'il est possible de se passer des id déclarés dans les balises <li> tout en conservant l'id déclaré dans <ul>...

Code HTML :

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

1
2
3
4
5
6
  <ul id="maliste" class="dropdown-menu">
   <li id="0" data-value="123" onclick="test(this)"></li>
   <li id="1" data-value="456" onclick="test(this)"></li>
   <li id="2" data-value="789" onclick="test(this)"></li>
   <li id="3" data-value="000" onclick="test(this)"></li>
  </ul>

Code :

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

1
2
3
4
function test(elm) {
	  var ul = document.getElementById(maliste');
	 alert(ul.getElementsByTagName('li')[elm.id].getAttribute('data-value'));
}

[Invité]

1- Je t'ai donné la solution :

Code html :

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

1
2
3
4
5
6
  <ul id="maliste" class="dropdown-menu">
   <li data-value="123" onclick="test(this)"></li>
   <li data-value="456" onclick="test(this)"></li>
   <li data-value="789" onclick="test(this)"></li>
   <li data-value="000" onclick="test(this)"></li>
  </ul>

Code :

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

1
2
3
4
5
function test(elt)
{
  var li_val = elt.dataset.value; // récupération du data-value
  console.log( li_val );
}

Fais un copier-coller !


2- En voici une variante, AVEC id et SANS fonction test() :

Code html :

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

1
2
3
4
<ul id="maliste">
  <li data-valeur="123">blabla 1</li>
  <li data-valeur="456">blabla 2</li>
</ul>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener("DOMContentLoaded", (event) => {
 
const maliste_lis = document.querySelectorAll('#maliste li');
maliste_lis.forEach(function(li){
  li.addEventListener('click',function(){
    var li_val = li.dataset.valeur;
 
    console.log( li_val );
  })
})
 
})

3- Allons-y pour une 3ème solution :

Code html :

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

1
2
3
4
5
6
  <ul id="maliste" class="dropdown-menu">
   <li onclick="test('123')">1</li>
   <li onclick="test('456')">2</li>
   <li onclick="test('789')">3</li>
   <li onclick="test('000')">4</li>
  </ul>

Code JavaScript :

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

1
2
3
4
function test(li_val)
{
  console.log( li_val );
}

[dominos]

Ce que tu fais, revient à faire un elm.getAttribute('value')...

ce qui m'interresse c'est de passer par l'id <ul id="maliste">... !

Si tu as une solution, je suis dessus depuis ce matin

[Invité]

C'est la variante (2-) que j'ai proposée...

Je t'ai donné 3 solutions qui fonctionnent (et répondent, à priori, à ta problématique).
Je ne vois pas ce que je peux faire de plus.


Sinon, explique plus clairement, et dans son contexte, ce qui te pose problème.

[psychadelic]

well, ma doc n'est pas à jour, et bon, on peut utiliser l'attribut "value", mais sinon l'attribut data-XXX est bien sur mieux adapté et beaucoup moins ambiguë sur le plan sémantique. ;-)

En fait j'ai l'impression qu'il recherche le mécanisme de délégation d'évenement en JS

ça se code comme ça:

Code HTML :

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

1
2
3
4
5
6
7
8
<ul id="ma-liste" class="dropdown-menu">
  <li data-value="123" >aaa</li>
  <li data-value="456" >bbb</li>
  <li                  >ccc</li>
  <li data-value="000" >ddd</li>
</ul>
 
<div id="message-box">...</div>

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const maListe = document.getElementById('ma-liste')
  ,   msgBox  = document.getElementById('message-box')
  ;
msgBox.display = msg =>    // pour remplacer la commande alert()
  {
  msgBox.textContent = msg
  setTimeout(()=>{ msgBox.textContent = '...' }, 2000);  // 2 secondes d'affichage c'est l'argement suffisant ?
  }
maListe.onclick = e =>   // récupere tout click effectué sur l'ensemble de la liste
  {
  if (!e.target.matches('li[data-value]')) return // on rejette tout ce qui ne correspond pas à cette condition
  msgBox.display ( e.target.dataset.value )
  }

[Invité]

@psychadelic

...et bon, on peut utiliser l'attribut "value"...

Sémantiquement, ce n'est pas la bonne méthode.

Balise <li> :

Attributs

value
Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément <ol>.
La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres.
[...]

On n'est donc pas censé y mettre n'importe quoi.


@dominos
SERIEUX ????
Tu n'es pas capable de COPIER-COLLER les codes qu'on te propose pour les TESTER ???

On n'a PAS BESOIN de cet INDEX pour récupérer la valeur !!

[dominos]

Code HTML :

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

1
2
3
4
5
6
<ul id="maliste" class="dropdown-menu">
 <li data-value="123" onclick="test(this)"></li>
 <li data-value="456" onclick="test(this)"></li>
 <li data-value="789" onclick="test(this)"></li>
 <li data-value="000" onclick="test(this)"></li>
</ul>

Pa bon ?

le elm dans la fonction me sert à autre chose, il est nécessaire....

en tout cas merci pour l'équivalent en jquery, c'est plus simple.

[dominos]

C'est parfait ! merci !

Code :

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

1
2
3
4
5
6
function test(elm) {
	var ul = document.getElementById("maliste");
	ul.addEventListener('click', function(e){
	    console.log( e.target.dataset.value );
	});
}

Ps: pour le bateau... j'aimerais bien, surtout en cette période de confinement...

[Invité]

Non, mais c'est encore et toujours n'importe quoi...
Ce n'est pas possible, tu le fait exprès ?

SÉRIEUX... MONTRE LE CODE HTML de la liste !

Je t'ai donné LA SYNTAXE CORRECTE dans mon précédent message !

Raccourcis clavier :

• COPIER : "Ctrl" + "C"
• COLLER : "Ctrl" + "V"

[psychadelic]

C'est parfait ! merci !

Code :

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

function test(elm) ....

mais pourquoi tu t’acharne à vouloir garder cette fonction test ?

Elle est completement inutile!
il faut simplement placer tes éléménts LI <li data-value="123" >aaa</li> (pris dans mon code) ici il n'y a pas de fonction test

[Invité]

@psychadelic
Je pense que dominos ne sait pas faire de copier-coller...


@dominos
Est-ce qu'au moins tu livres des pizzas ??