Ok pour commencer j'ai actuellement 4 divs avec le même id par exemple:

 <div id='name'></div>
 <div id='name'></div>
 <div id='name'></div>
 <div id='name'></div>

Et im utilise actuellement une fonction javascript pour afficher la valeur des div par exemple:

function divCheck(){
        alert(document.getElementById('name').innerHTML);
        }

Le problème que j'ai est quand j'appelle la fonction, elle n'affiche que la valeur de la première div.

Mon objectif est d'afficher les valeurs de toutes les divs et de les placer dans une entrée Textarea.

Je l'apprécierai vraiment vraiment. D'avance merci.

1
user977644 4 oct. 2011 à 04:54

4 réponses

Meilleure réponse

Comme d'autres l'ont dit, utilisez des classes plutôt que des identifiants. Chaque identifiant doit être unique. Vous ne pouvez pas avoir plus d'un objet avec le même identifiant. Voici à quoi cela ressemble avec un nom de classe:

<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>

Et, voici comment obtenir tous les objets avec un nom de classe donné et les parcourir:

function divCheck() {
    var elems = document.getElementsByClassName('name');
    for (var i = 0; i < elems.length; i++) {
        alert(elems[i].innerHTML);
    }
}

Malheureusement, getElementsByClassName() n'était pas pris en charge par IE avant IE9, vous devrez donc utiliser un shim javascript qui l'implémentera d'une manière différente lorsqu'il n'existe pas déjà. Ou, utilisez une bibliothèque prédéfinie comme Sizzle ou jQuery qui prend déjà en charge ce type de fonctionnalité dans les navigateurs plus anciens.

1
jfriend00 4 oct. 2011 à 01:02

Étant donné que vous semblez rechercher une fonction getElementsByClassName indépendante de toute bibliothèque, essayez ce qui suit. Il essaie d'abord querySelectorAll , s'il n'est pas disponible, il essaie getElementsByClassName , et enfin fait une vieille école itère sur les éléments.

Il accepte également plusieurs noms de classe et renvoie toujours une NodeList statique ou un tableau des éléments correspondants (par querySelectorAll). Notez que getElemensByClassName renvoie une NodeList en direct, donc le résultat doit être converti en tableau sinon il pourrait se comporter un peu différemment si des éléments sont ajoutés ou supprimés du document.

/*
  Selector must be per CSS period notation, using attribute notation
  (i.e. [class~=cName]) won't work for non qSA browsers:

    single class: .cName
    multiple class: .cName0.cName1.cName2

  If no root element provided, use document

  First tries querySelectorAll, 

  If not available replaces periods '.' with spaces
  and tries host getElementsByClassName

  If not available, splits on spaces, builds a RegExp
  for each class name, gets every element inside the
  root and tests for each class.

  Could remove duplicate class names for last method but
  unlikely to occur so probably a waste of time.

  Tested in:
    Firefox 5.0 (qSA, gEBCN, old)
    IE 8 (old method only, doesn't support qSA or gEBCN)
    Chrome 14 (qSA, gEBCN, old)
*/
function getByClassName(cName, root) {

  root = root || document;
  var reClasses = [], classMatch;
  var set = [], node, nodes;

  // Use qSA if available, returns a static list
  if (root.querySelectorAll) {
    return root.querySelectorAll(cName);
  }

  // Replace '.' in selector with spaces and trim
  // leading and trailing whitespace for following methods
  cName = cName.replace(/\./g, ' ').replace(/^\s+/,'').replace(/\s+$/,'');

  // Use gEBCN if available
  if (root.getElementsByClassName) {
    nodes = root.getElementsByClassName(cName);

    // gEBCN usually returns a live list, make it static to be
    // consistent with other methods
    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      set[i] = nodes[i];
    }
    return set;
  }

  // Do it the long way... trim leading space also
  nodes = root.getElementsByTagName('*');
  cName = cName.split(/\s+/);

  // Create a RegExp array of the class names to search on
  // Could filter for dupes but unlikely to be worth it
  for (var j = 0, jLen = cName.length; j < jLen; j++) {
    reClasses[j] = new RegExp('(^|\\s+)' + cName[j] + '\\s+|$');
  }

  // Test each element for each class name
  for (var m = 0, mLen = nodes.length; m < mLen; m++) {
    node = nodes[m];
    classMatch = true;

    // Stop testing class names when get a match
    for (var n = 0, nLen = reClasses.length; n < nLen && classMatch; n++) {
      classMatch = node.className && reClasses[n].test(node.className);
    }

    if (classMatch) {
      set.push(node);
    }
  }
  return set;
}
0
RobG 4 oct. 2011 à 01:37

Hey pourquoi n'utilisez-vous pas la classe au lieu des ID. Donnez des noms de classe dynamiques comme class = "className - '+ id +'" Et appelez-les en utilisant:

$('div[class^="className-'+id+'""]') J'espère que ce sera utile.

P.S Évitez d'utiliser les mêmes identifiants pour les éléments.

1
Nasruddin 18 oct. 2013 à 11:01

Utilisez la classe au lieu de l'id et utilisez getElementsByClassName

L'ID est à utiliser une seule fois, et est généralement pour les gros éléments (div, etc.) qui doivent être assez uniques, ou doivent être accessibles individuellement, lorsque vous devez accéder à des combinaisons ou même appliquer des propriétés CSS sur des groupes d'éléments html sans avoir à taper les à nouveau et pour chaque id, utilisez la classe et appliquez les propriétés communes à cette classe, utilisez l'ID pour les propriétés uniques.

De même, ici, utilisez class, comme vous pouvez le voir, la fonction est get * Elements * ByClassName, signifie qu'elle renvoie un groupe, et c'est à cela que sert la classe. Pour ce type d'utilisation, utilisez class au lieu d'ID.

2
SpeedBirdNine 4 oct. 2011 à 00:57
7642271