javascript - queryselectorall - innerhtml

Javascript getElementById base en una cadena parcial

Question

Necesito obtener la ID de un elemento, pero el valor es dinámico, ya que solo el comienzo es el mismo siempre.

Aquí hay un fragmento del código.

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

La ID siempre comienza con ''post-'', luego los números son dinámicos.

¿Cómo puedo obtener la identificación usando solo JavaScript y no jQuery?

Answer 1

Dado que lo que quieres es determinar el ID completo del elemento basado solo en el prefijo, vas a tener que hacer una búsqueda de todo el DOM (o al menos, una búsqueda de un subárbol completo si conoces algunos elemento que siempre está garantizado para contener su elemento objetivo). Puedes hacer esto con algo como:

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

Aquí hay un ejemplo: http://jsfiddle.net/xwqKh/

Tenga en cuenta que los identificadores de elementos dinámicos como aquellos con los que está trabajando se suelen utilizar para garantizar la exclusividad de los identificadores de elementos en una sola página. Lo que significa que es probable que haya múltiples elementos que comparten el mismo prefijo. Probablemente quieras encontrarlos a todos.

Si quiere encontrar todos los elementos que tienen un prefijo dado, en lugar de solo el primero, puede usar algo como lo que se muestra aquí: http://jsfiddle.net/xwqKh/1/

Answer 2

No estoy del todo seguro de saber por qué me preguntas, pero puedes usar las funciones de cadena para crear la identificación real que estás buscando.

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

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

Si no conoce la identificación real, entonces no puede buscar el objeto con getElementById, tendría que encontrarlo de otra manera (por nombre de clase, por tipo de etiqueta, por atributo, por padre, por niño, etc ...).

Ahora que finalmente nos ha dado algo del código HTML, puede usar este JS simple para encontrar todos los elementos del formulario que tienen una ID que comienza con "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);
}

Answer 3

Probablemente tendrá que darle una clase constante y llamar a getElementsByClassName , o simplemente usar getElementsByTagName , y recorrer sus resultados, verificando el nombre.

Te sugiero que veas tu problema subyacente y descubras un modo de conocer la identificación por adelantado.

Tal vez si publicó un poco más acerca de por qué está recibiendo esto, podríamos encontrar una mejor alternativa.

Answer 4

Prueba esto.

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

Ejemplo de marcado 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>

Llámalo como

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

Demostración aquí: http://jsfiddle.net/naveen/P4cFu/

Answer 5

Usted usa la propiedad id para obtener la identificación, luego el método substr para eliminar la primera parte de ella, luego, opcionalmente, para convertirla en un número:

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

o:

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

Answer 6

Puede usar querySelector para eso:

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

El selector significa: obtener un elemento donde el atributo [id] comienza con la cadena "poll-" .

^ coincide con el comienzo
* coincide con cualquier posición
$ coincide con el final

jsfiddle

Answer 7

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

La ID siempre comienza con ''post-'', luego los números son dinámicos.

Por favor revise sus nombres de identificación, "encuesta" y "publicación" son muy diferentes.

Como ya se respondió, puede usar querySelector:

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

pero querySelector no encontrará "poll" si sigue consultando "post": ''[id^="post-"]''