web-dev-qa-db-fra.com

Javascript getElementById base sur une chaîne partielle

J'ai besoin d'obtenir l'ID d'un élément, mais la valeur est dynamique, seul le début est identique. 

Voici un extrait du code.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">

L'identifiant commence toujours par 'poll-', puis les nombres sont dynamiques.

Comment puis-je obtenir l'ID en utilisant uniquement JavaScript et pas jQuery?

javascriptgetelementbyid
41
calebo

Vous pouvez utiliser le querySelector pour cela:

document.querySelector('[id^="poll-"]').id;

Le sélecteur signifie: obtenir un élément où l'attribut [id] commence par la chaîne "poll-".

^ correspond au début
* correspond à n'importe quelle position
$ correspond à la fin 

jsfiddle

63
A1rPun

Essaye ça.

function getElementsByIdStartsWith(container, selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementById(container).getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        //omitting undefined null check for brevity
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.Push(myPosts[i]);
        }
    }
    return items;
}

Exemple de balisage HTML.

<div id="posts">
    <div id="post-1">post 1</div>
    <div id="post-12">post 12</div>
    <div id="post-123">post 123</div>
    <div id="pst-123">post 123</div>
</div>

Appelez ça comme

var postedOnes = getElementsByIdStartsWith("posts", "div", "post-");

Démo ici: http://jsfiddle.net/naveen/P4cFu/

8
naveen

Étant donné que ce que vous voulez, c'est déterminer l'identifiant complet de l'élément en vous basant uniquement sur le préfixe, vous devrez faire une recherche dans le DOM entier (ou du moins, dans un sous-arbre entier si vous en connaissez élément qui contient toujours votre élément cible). Vous pouvez le faire avec quelque chose comme:

function findChildWithIdLike(node, prefix) {
    if (node && node.id && node.id.indexOf(prefix) == 0) {
        //match found
        return node;
    }

    //no match, check child nodes
    for (var index = 0; index < node.childNodes.length; index++) {
        var child = node.childNodes[index];
        var childResult = findChildWithIdLike(child, prefix);
        if (childResult) {
            return childResult;
        }
    }
};

Voici un exemple: http://jsfiddle.net/xwqKh/

Sachez que les identifiants d'élément dynamiques tels que ceux sur lesquels vous travaillez sont généralement utilisés pour garantir l'unicité des identifiants d'élément sur une seule page. Cela signifie qu'il est probable que plusieurs éléments partagent le même préfixe. Vous voulez probablement tous les trouver. 

Si vous voulez trouver tous les éléments qui ont un préfixe donné, au lieu du premier, vous pouvez utiliser quelque chose comme ce qui est démontré ici: http://jsfiddle.net/xwqKh/1/

2
aroth

Je ne suis pas tout à fait sûr de savoir de quoi vous parlez, mais vous pouvez utiliser des fonctions de chaîne pour créer l'identifiant que vous recherchez.

var base = "common";
var num = 3;

var o = document.getElementById(base + num);  // will find id="common3"

Si vous ne connaissez pas l'ID réel, vous ne pouvez pas rechercher l'objet avec getElementById, vous devez le trouver d'une autre manière (par nom de classe, par type de balise, par attribut, par parent, par enfant etc...).

Maintenant que vous nous avez enfin donné une partie du code HTML, vous pouvez utiliser ce JS simple pour trouver tous les éléments de formulaire ayant un ID commençant par "poll-":

// get a list of all form objects that have the right type of ID
function findPollForms() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            results.Push(list[i]);
        }
    }
    return(results);
}

// return the ID of the first form object that has the right type of ID
function findFirstPollFormID() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            return(id);
        }
    }
    return(null);
}
1
jfriend00
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">

L'identifiant commence toujours par «post-», puis les chiffres sont dynamiques.

Veuillez vérifier vos noms d'identifiant, "poll" et "post" sont très différents.

Comme déjà répondu, vous pouvez utiliser querySelector:

var selectors = '[id^="poll-"]';
element = document.querySelector(selectors).id;

mais querySelector ne trouvera pas "poll" si vous continuez à interroger "post": '[id^="post-"]'

1
jester

Vous devrez probablement lui attribuer une classe constante et appeler getElementsByClassName, ou peut-être simplement utiliser getElementsByTagName et parcourir vos résultats en vérifiant le nom.

Je suggérerais d'examiner votre problème sous-jacent et de trouver un moyen de connaître l'identité à l'avance.

Peut-être que si vous publiez un peu plus sur la raison pour laquelle vous obtenez ceci, nous pourrions trouver une meilleure alternative.

0
Joe Enos

Vous utilisez la propriété id pour obtenir l'id, puis la méthode substr pour en supprimer la première partie, puis éventuellement parseInt pour la transformer en nombre:

var id = theElement.id.substr(5);

ou:

var id = parseInt(theElement.id.substr(5));
0
Guffa