Подтвердить что ты не робот

Получить несколько элементов по идентификатору

У меня есть страница с привязными тегами по всему телу, как это:

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

Идентификатор всегда один и тот же, но имя изменяется.

Мне нужно заполнить список имен этих якорных тегов, например; Имя 1, Имя 2, Имя 3. Вот где я до сих пор:

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

Это записывает имя первого тега привязки. Мне нужен способ получить несколько элементов по идентификатору.

Любая помощь очень ценится.

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы можете изменить разметку, вместо этого вы можете использовать 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);

jsfiddle demo

Ответ 2

Как противопоставить тому, что могут сказать другие, использование одного и того же идентификатора для нескольких элементов не остановит загрузку страницы, но при попытке выбрать элемент по идентификатору единственным возвращаемым элементом является первый элемент с указанным идентификатором. Не говоря уже о том, что использование одного и того же идентификатора даже не является допустимым HTML.

Таким образом, никогда не используйте атрибуты дубликата id. Если вы думаете, что вам нужно, тогда вы ищете класс. Например:

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

Обратите внимание, что каждый данный элемент имеет другой идентификатор, но тот же класс. В отличие от того, что вы делали выше, это законный синтаксис HTML. Все стили CSS, которые вы используете для ".mydiv" (класс меток точек), будут корректно работать для каждого отдельного элемента с тем же классом.

С небольшой помощью Snipplr вы можете использовать это, чтобы получить каждый элемент, указав определенное имя класса:

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

Вышеупомянутый script возвращает массив, поэтому убедитесь, что вы правильно настроили его.

Ответ 3

У вас не может быть дубликатов идентификаторов. Идентификаторы должны быть уникальными. Вместо этого вы можете использовать специализированный класс.

Ответ 4

Вот функция, с которой я придумал

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

По-видимому, существует соглашение, поддерживаемое прототипом и, возможно, другими основными библиотеками JavaScript.

Однако я обнаружил, что функция знака доллара стала более или менее де-факто ярлык document.getElementById(). Давайте Посмотрим правде в глаза, все мы много используем document.getElementById(). Это не только потребуется время для ввода, но оно добавляет байты в ваш код.

вот функция из прототипа:

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

[Источник]

Ответ 5

Сегодня вы можете выбрать элементы с одинаковым атрибутом id следующим образом:

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

Или так с помощью jQuery:

$('[id=test]');

CSS селектор #test {... } должен работать также для всех элементов с id = "test". Но единственное: document.querySelectorAll('#test') (или $('#test')) - вернет только первый элемент с этим идентификатором. Хорошо это или нет - я не могу сказать. Но иногда трудно следовать уникальному стандарту id.

Например, у вас есть виджет комментариев с HTML-идентификаторами и JS-кодом, работающий с этими HTML-идентификаторами. Рано или поздно вам придется многократно визуализировать этот виджет, комментировать различные объекты на одной странице: и здесь стандарт будет нарушен (часто нет времени или не разрешается - переписывать встроенный код).

Ответ 6

Больше чем один элемент с тем же идентификатором недопустим, getElementById Возвращает элемент, идентификатор которого задается элементомId. Если такой элемент не существует, он возвращает null. Поведение не определено, если более одного элемента имеет этот идентификатор.

Ответ 7

Если вы не религиозны в отношении того, что ваш HTML-код действителен, я вижу примеры использования, когда один и тот же идентификатор на нескольких элементах может быть полезен.

Одним из примеров является тестирование. Часто мы идентифицируем элементы для проверки, обнаруживая все элементы с определенным классом. Однако, если мы обнаруживаем, что добавляем классы исключительно для целей тестирования, тогда я буду утверждать, что это неправильно. Классы предназначены для стилизации, а не для идентификации.

Если идентификаторы для идентификации, почему нужно, чтобы только один элемент мог иметь определенный идентификатор? В частности, в сегодняшнем мире внешнего интерфейса с компонентами многократного использования, если мы не хотим использовать классы для идентификации, нам нужно использовать идентификаторы. Но, если мы будем использовать кратность компонента, у нас будет несколько элементов с одинаковым идентификатором.

Я говорю это хорошо. Если эта анафема вам, это прекрасно, я понимаю ваше мнение. Согласитесь не согласиться и двигаться дальше.

Если вам нужно решение, которое на самом деле находит все ID с тем же именем, то это:

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
}

EDIT, ES6 FTW:

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

Ответ 8

Вы должны использовать querySelectorAll, это записывает каждое вхождение в массив и позволяет использовать forEach для получения отдельного элемента.

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

Ответ 9

С помощью querySelectorAll вы можете выбрать нужные элементы без одного и того же идентификатора с помощью селектора css:

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

Ответ 10

"id" Указывает уникальный идентификатор для элемента и класса. Указывает одно или несколько классов для элемента. Поэтому лучше использовать "Класс" вместо "id".

Ответ 11

Вы можете получить множественный элемент по идентификатору, указав, что это за элемент. Например

<div id='id'></div>
<div id='id'></div>
<div id='id'></div>

Я предполагаю, что если вы используете JQuery, вы можете выбрать все их

$ ( "# DIV ID")

Это даст вам массив элементов, которые вы зациклите, основываясь на вашей логике.

Ответ 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"];
?>

Ответ 13

Использовать множественный селектор jquery.

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

Ссылка: http://api.jquery.com/multiple-selector/

Селектор

должен выглядеть так: $( "# id1, # ​​id2, # id3" )