webentwicklung-frage-antwort-db.com.de

Javascript getElementById basiert auf einer Teilzeichenfolge

Ich brauche die ID eines Elements, aber der Wert ist dynamisch, nur der Anfang ist immer derselbe. 

Hier ist ein Ausschnitt des Codes.

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

Die ID beginnt immer mit 'poll-', dann sind die Zahlen dynamisch.

Wie erhalte ich die ID nur mit JavaScript und nicht mit jQuery?

41
calebo

Sie kann verwenden der querySelector dafür

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

Der Selektor bedeutet: Holen Sie sich ein Element, bei dem das Attribut [id] mit der Zeichenfolge "poll-" beginnt.

^ stimmt mit dem Start überein
* stimmt mit jeder Position überein
$ stimmt mit dem Ende überein 

jsfiddle

63
A1rPun

Versuche dies.

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;
}

Beispiel für HTML-Markup.

<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>

Nenne es wie

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

Demo hier: http://jsfiddle.net/naveen/P4cFu/

8
naveen

In Anbetracht dessen, dass Sie die vollständige ID des Elements nur anhand des Präfixes ermitteln möchten, müssen Sie das gesamte DOM durchsuchen (oder zumindest die Suche nach einer gesamten Unterstruktur, wenn Sie einige kennen Element, das garantiert immer Ihr Zielelement enthält). Sie können dies mit so etwas tun:

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;
        }
    }
};

Hier ist ein Beispiel: http://jsfiddle.net/xwqKh/

Beachten Sie, dass dynamische Element-IDs wie die, mit denen Sie gerade arbeiten, normalerweise verwendet werden, um die Eindeutigkeit der Element-IDs auf einer einzelnen Seite zu gewährleisten. Das bedeutet, dass es wahrscheinlich ist, dass es mehrere Elemente gibt, die dasselbe Präfix verwenden. Wahrscheinlich möchten Sie sie alle finden. 

Wenn Sie alle Elemente mit einem bestimmten Präfix anstelle des ersten finden möchten, können Sie etwas verwenden, was hier gezeigt wird: http://jsfiddle.net/xwqKh/1/

2
aroth

Ich bin nicht ganz sicher, ob ich weiß, wonach Sie fragen, aber Sie können String-Funktionen verwenden, um die tatsächliche ID zu erstellen, nach der Sie suchen.

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

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

Wenn Sie die tatsächliche ID nicht kennen, können Sie das Objekt mit getElementById nicht nachschlagen. Sie müssen es auf eine andere Weise finden (nach Klassenname, nach Tag-Typ, nach Attribut, nach übergeordnetem Element, nach untergeordnetem Element). usw...).

Nachdem Sie uns nun endlich etwas von HTML gegeben haben, können Sie mit diesem einfachen JS alle Formularelemente suchen, deren ID mit "poll-" beginnt:

// 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">

Die ID beginnt immer mit 'post-', dann sind die Zahlen dynamisch.

Bitte überprüfen Sie Ihre ID-Namen. "Poll" und "post" sind sehr unterschiedlich.

Wie bereits beantwortet, können Sie querySelector verwenden:

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

querySelector findet jedoch nicht "poll", wenn Sie ständig nach "post" fragen: '[id^="post-"]'

1
jester

Sie müssen ihm wahrscheinlich entweder eine konstante Klasse geben und getElementsByClassName aufrufen, oder einfach getElementsByTagName verwenden und Ihre Ergebnisse durchlaufen und den Namen überprüfen.

Ich würde vorschlagen, Ihr zugrunde liegendes Problem zu betrachten und herauszufinden, wie Sie die ID im Voraus kennen.

Wenn Sie etwas mehr darüber erfahren, warum Sie dies erhalten, könnten wir eine bessere Alternative finden.

0
Joe Enos

Sie verwenden die id-Eigenschaft, um die ID abzurufen, dann die substr-Methode, um den ersten Teil davon zu entfernen, und dann optional parseInt, um daraus eine Zahl zu machen:

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

oder:

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