javascript - obtener - seleccionar elementos jquery

Obtener múltiples elementos por ID

Question

Tengo una página con etiquetas de anclaje en todo el cuerpo como esta:

<a id="test" name="Name 1"></a>
<a id="test" name="Name 2"></a>
<a id="test" name="Name 3"></a>

La identificación es siempre la misma pero el nombre cambia.

Necesito rellenar una lista de los nombres de estas etiquetas de anclaje, por ejemplo; Nombre 1, Nombre 2, Nombre 3. Aquí es donde he llegado hasta ahora:

document.write(document.getElementById("readme").name);

Esto escribe el nombre de la primera etiqueta de anclaje. Necesito una forma de obtener múltiples elementos por ID.

Cualquier ayuda es muy apreciada.

Answer 1

Aquí hay una función que se me ocurrió

function getElementsById(elementID){
    var elementCollection = new Array();
    var allElements = document.getElementsByTagName("*");
    for(i = 0; i < allElements.length; i++){
        if(allElements[i].id == elementID)
            elementCollection.push(allElements[i]);

    }
    return elementCollection;
}

Aparentemente, existe una convención respaldada por prototipos y, probablemente, otras bibliotecas de JavaScript importantes.

Sin embargo, he llegado a descubrir que la función de signo de dólar se ha convertido en el acceso directo más o menos de facto a document.getElementById (). Seamos realistas, todos usamos mucho document.getElementById (). No solo lleva tiempo escribir, sino que también agrega bytes a su código.

Aquí está la función del prototipo:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

[Source]

Answer 2

Como se opone a lo que otros puedan decir, usar la misma Id para varios elementos no detendrá la carga de la página, pero cuando se trata de seleccionar un elemento por Id, el único elemento devuelto es el primer elemento con la id especificada. Por no mencionar que usar el mismo id ni siquiera es HTML válido.

Siendo así, nunca use atributos de identificación duplicados. Si está pensando que necesita hacerlo, entonces está buscando clase . Por ejemplo:

<div id="div1" class="mydiv">Content here</div>
<div id="div2" class="mydiv">Content here</div>
<div id="div3" class="mydiv">Content here</div>

Observe cómo cada elemento dado tiene una identificación diferente, pero la misma clase. En oposición a lo que hizo anteriormente, esta es una sintaxis HTML legal. Cualquier estilo CSS que use para ''.mydiv'' (el punto significa clase) funcionará correctamente para cada elemento individual con la misma clase.

Con un poco de ayuda de Snipplr, puedes usar esto para obtener cada elemento especificando un determinado nombre de clase:

function getAllByClass(classname, node) {

    if (!document.getElementsByClassName) {
        if (!node) {
            node =  document.body;
        }

        var a = [],
            re = new RegExp(''//b'' + classname + ''//b''),
            els = node.getElementsByTagName("*");

        for (var i = 0, j = els.length; i < j; i++) {
            if (re.test(els[i].className)) {
                a.push(els[i]);
            }
        }
    } else {
        return document.getElementsByClassName(classname);
    }

    return a;
}

La secuencia de comandos anterior devolverá un Array, así que asegúrese de ajustarlo correctamente.

Answer 3

Con querySelectorAll puede seleccionar los elementos que desee sin la misma ID utilizando el selector css:

var elems = document.querySelectorAll("#id1, #id1, #id3");

Answer 4

Debería usar querySelectorAll, esto escribe cada aparición en una matriz y le permite usar forEach para obtener un elemento individual.

document.querySelectorAll(''[id=test]'').forEach(element=> 
    document.write(element);
});

Answer 5

Hoy puedes seleccionar elementos con el mismo atributo id de esta manera:

document.querySelectorAll(''[id=test]'');

O de esta manera con jQuery:

$(''[id=test]'');

El selector de CSS #test { ... } debería funcionar también para todos los elementos con id = "test" . Pero lo único: document.querySelectorAll(''#test'') (o $(''#test'') ) - devolverá solo un primer elemento con este id. ¿Es bueno o no? No puedo decirlo. Pero a veces es difícil seguir una norma de identificación única .

Por ejemplo, tiene el widget de comentarios, con ID de HTML y código JS, que funciona con estos ID de HTML. Tarde o temprano tendrá que renderizar este widget muchas veces, para comentar diferentes objetos en una sola página: y aquí se rompe la norma (a menudo no hay tiempo o no se permite, para volver a escribir el código incorporado).

Answer 6

No puedes tener identificaciones duplicadas. Se supone que las identificaciones son únicas. Es posible que desee utilizar una clase especializada en su lugar.

Answer 7

No se permite más de un elemento con la misma ID, getElementById Devuelve el Elemento cuya ID la proporciona elementId. Si no existe tal elemento, devuelve nulo. El comportamiento no se define si más de un elemento tiene este ID.

Answer 8

Si no te interesa que tu HTML sea válido, puedo ver casos de uso en los que tener la misma identificación en varios elementos puede ser útil.

Un ejemplo es la prueba. A menudo identificamos los elementos contra los que se debe probar encontrando todos los elementos con una clase particular. Sin embargo, si nos encontramos agregando clases únicamente con fines de prueba, entonces sostendré que eso es incorrecto. Las clases son para el estilo, no para la identificación.

Si los ID son para identificación, ¿por qué debe ser que solo un elemento puede tener un identificador particular? Particularmente en el mundo de frontend de hoy, con componentes reutilizables, si no queremos usar clases para identificación, entonces necesitamos usar ID. Pero, si usamos los múltiplos de un componente, tendremos múltiples elementos con la misma ID.

Estoy diciendo que está bien. Si eso es un anatema para ti, está bien, entiendo tu opinión. Acordemos estar en desacuerdo y seguir adelante.

Si quieres una solución que realmente encuentre todas las identificaciones con el mismo nombre, entonces es esto:

function getElementsById(id) {
    const elementsWithId = []
    const allElements = document.getElementsByTagName(''*'')
    for(let key in allElements) {
        if(allElements.hasOwnProperty(key)) {
            const element = allElements[key]
            if(element.id === id) {
                elementsWithId.push(element)
            }        
        }
    }
    return elementsWithId
}

EDITAR, ES6 FTW:

function getElementsById(id) {
    return [...document.getElementsByTagName(''*'')].filter(element => element.id === id)
}

Answer 9

Si puede cambiar el marcado, es posible que desee utilizar la class .

<!-- html -->
<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

// javascript
var elements = document.getElementsByClassName("test");
var names = '''';
for(var i=0; i<elements.length; i++) {
    names += elements[i].name;
}
document.write(names);

demo jsfiddle

Answer 10

Una "identificación" especifica una identificación única para un elemento y una clase especifica uno o más nombres de clase para un elemento. Así que es mejor usar "Clase" en lugar de "id".

Answer 11

Utilice jquery selector múltiple.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div,span,p {
width: 126px;
height: 60px;
float:left;
padding: 3px;
margin: 2px;
background-color: #EEEEEE;
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
</body>
</html>

Enlace: http://api.jquery.com/multiple-selector/

El selector debería tener este aspecto: $ ("# id1, # ​​id2, # id3")

Answer 12

Below is the work around to submit Multi values, in case of converting the application from ASP to PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function SetValuesOfSameElements() {
    var Arr_Elements = [];
    Arr_Elements = document.getElementsByClassName("MultiElements");

    for(var i=0; i<Arr_Elements.length; i++) {
        Arr_Elements[i].value = '''';
        var Element_Name = Arr_Elements[i].name;
        var Main_Element_Type = Arr_Elements[i].getAttribute("MainElementType");
        var Multi_Elements = [];
        Multi_Elements = document.getElementsByName(Element_Name);
        var Multi_Elements_Values = '''';
//alert(Element_Name + " > " + Main_Element_Type + " > " + Multi_Elements_Values);
        if (Main_Element_Type == "CheckBox") {
            for(var j=0; j<Multi_Elements.length; j++) {
                if (Multi_Elements[j].checked == true) {
                    if (Multi_Elements_Values == '''') {
                        Multi_Elements_Values = Multi_Elements[j].value;
                    }
                    else {
                        Multi_Elements_Values += '', ''+ Multi_Elements[j].value;
                    }
                }
            }
        }
        if (Main_Element_Type == "Hidden" || Main_Element_Type == "TextBox") {
            for(var j=0; j<Multi_Elements.length; j++) {
                if (Multi_Elements_Values == '''') {
                    Multi_Elements_Values = Multi_Elements[j].value;
                }
                else {
                    if (Multi_Elements[j].value != '''') {
                        Multi_Elements_Values += '', ''+ Multi_Elements[j].value;
                    }
                }
            }
        }
        Arr_Elements[i].value = Multi_Elements_Values;
    }
}

</script>
<BODY>
<form name="Training" action="TestCB.php" method="get" onsubmit="SetValuesOfSameElements()"/>
    <table>

        <tr>
            <td>Check Box</td>
            <td>
                <input type="CheckBox" name="TestCB" id="TestCB" value="123">123</input>
                <input type="CheckBox" name="TestCB" id="TestCB" value="234">234</input>
                <input type="CheckBox" name="TestCB" id="TestCB" value="345">345</input>
            </td>
            <td>
                <input type="hidden" name="SdPart" id="SdPart" value="1231"></input>
                <input type="hidden" name="SdPart" id="SdPart" value="2341"></input>
                <input type="hidden" name="SdPart" id="SdPart" value="3451"></input>

                <input type="textbox" name="Test11" id="Test11" value="345111"></input>

                <!-- Define hidden Elements with Class name ''MultiElements'' for all the Form Elements that used the Same Name (Check Boxes, Multi Select, Text Elements with the Same Name, Hidden Elements with the Same Name, etc 
                -->
                <input type="hidden" MainElementType="CheckBox" name="TestCB" class="MultiElements" value=""></input>
                <input type="hidden" MainElementType="Hidden" name="SdPart" class="MultiElements" value=""></input>
                <input type="hidden" MainElementType="TextBox" name="Test11" class="MultiElements" value=""></input>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Submit" name="Submit" id="Submit" value="Submit" />
            </td>
        </tr>
    </table>
</form>

</BODY>
</HTML>


testCB.php 

<?php
echo $_GET["TestCB"];
echo "<br/>";
echo $_GET["SdPart"];
echo "<br/>";
echo $_GET["Test11"];
?>