web-dev-qa-db-ja.com

部分文字列に基づいたJavascript getElementById

要素のIDを取得する必要がありますが、値は動的であり、先頭のみが常に同じです。

コードのスニペットを示します。

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

IDは常に「poll-」で始まり、数字は動的です。

JQueryではなくJavaScriptだけを使用してIDを取得するにはどうすればよいですか？

javascriptgetelementbyid
51
calebo

使用可能querySelector そのため：

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

セレクタの意味は、属性[id]が文字列"poll-"で始まる要素を取得することです。

^は開始と一致します
*は任意の位置に一致します
$は最後に一致します

jsfiddle

75
A1rPun

これを試して。

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

サンプル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>

のように呼ぶ

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

デモはこちら： http://jsfiddle.net/naveen/P4cFu/

8
naveen

プレフィックスだけに基づいて要素の完全なIDを決定することが必要な場合、DOM全体を検索する必要があります（少なくとも、いくつかのことがわかっている場合はサブツリー全体を検索する必要があります）ターゲット要素を含むことが常に保証されている要素）。次のような方法でこれを行うことができます。

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

例は次のとおりです。 http://jsfiddle.net/xwqKh/

通常、作業中の要素のような動的要素IDは、単一ページ上の要素IDの一意性を保証するために使用されることに注意してください。つまり、同じプレフィックスを共有する要素が複数ある可能性が高いということです。おそらくあなたはそれらをすべて見つけたいでしょう。

最初の要素だけでなく、特定の接頭辞を持つすべての要素を検索する場合は、ここに示すようなものを使用できます。 http://jsfiddle.net/xwqKh/1/ =

3
aroth

私はあなたが何を求めているのかを完全に確信しているわけではありませんが、あなたが探している実際のIDを作成するために文字列関数を使用することができます。

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

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

実際のIDがわからない場合は、getElementByIdでオブジェクトを検索できません。他の方法（クラス名、タグタイプ、属性、親、子、等...）。

HTMLの一部を最終的に提供したので、この単純なJSを使用して、「poll-」で始まるIDを持つすべてのフォーム要素を見つけることができます。

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

IDは常に「post-」で始まり、数字は動的です。

ID名を確認してください。「poll」と「post」は大きく異なります。

すでに答えたように、querySelectorを使用できます。

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

ただし、「post」のクエリを続けた場合、querySelectorは「poll」を検出しません。'[id^="post-"]'

0
jester

おそらく、定数クラスを与えてgetElementsByClassNameを呼び出すか、単にgetElementsByTagNameを使用して、名前を確認しながら結果をループする必要があります。

根本的な問題を見て、IDを事前に知ることができる方法を見つけ出すことをお勧めします。

なぜこれを取得しているのかについてもう少し投稿していただければ、より良い代替案を見つけることができます。

0
Joe Enos

idプロパティを使用してIDを取得し、次にsubstrメソッドを使用してその最初の部分を削除し、オプションでparseIntを使用してそれを数値に変換します。

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

または：

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