부분 문자열의 Javascript getElementById 기반

부분 문자열의 Javascript getElementById 기반

---

요소의 ID를 가져와야하지만 값은 동적이며 시작 부분 만 항상 동일합니다.

다음은 코드의 일부입니다.

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

ID는 항상 'poll-'로 시작하고 숫자는 동적입니다.

jQuery가 아닌 JavaScript를 사용하여 ID를 얻으려면 어떻게해야합니까?

---

이를 위해 querySelector 를 사용할 수 있습니다 .

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

선택자는 속성 [id]이 문자열로 시작 하는 요소를 가져옵니다 "poll-".

^시작
*과 일치 모든 위치
$와 끝과 일치

jsfiddle

---

이 시도.

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/

---

원하는 것은 접두사만을 기반으로 요소의 전체 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/

---

나는 당신이 무엇을 요구하는지 완전히 확신하지 못하지만 문자열 함수를 사용하여 찾고있는 실제 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);
}

---

상수 클래스를 제공하고을 호출 getElementsByClassName하거나을 사용 getElementsByTagName하고 결과를 반복하면서 이름을 확인해야 할 것입니다.

근본적인 문제를 살펴보고 ID를 미리 알 수있는 방법을 알아내는 것이 좋습니다.

Maybe if you posted a little more about why you're getting this, we could find a better alternative.

---

You use the id property to the get the id, then the substr method to remove the first part of it, then optionally parseInt to turn it into a number:

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

or:

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

---

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

The ID always starts with 'post-' then the numbers are dynamic.

Please check your id names, "poll" and "post" are very different.

As already answered, you can use querySelector:

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

but querySelector will not find "poll" if you keep querying for "post": '[id^="post-"]'

ReferenceURL : https://stackoverflow.com/questions/6991494/javascript-getelementbyid-base-on-partial-string