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

Question

Пожалуйста, прости меня, если я повторю вопрос.

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

вот мой пример HTML:

<div id="div1" >
    <input type="text" id="edit1" />
    <input type="text" id="edit2" />
</div>
<div id="div2" >
    <input type="text" id="edit1" />
    <input type="text" id="edit2" />
</div>

Answer 1

Вы можете попробовать что-то вроде этого.

Пример разметки.

<div id="div1" >
    <input type="text" id="edit1" />
    <input type="text" id="edit2" />
</div>
<div id="div2" >
    <input type="text" id="edit3" />
    <input type="text" id="edit4" />
</div>

JavaScript

function GetElementInsideContainer(containerID, childID) {
    var elm = {};
    var elms = document.getElementById(containerID).getElementsByTagName("*");
    for (var i = 0; i < elms.length; i++) {
        if (elms[i].id === childID) {
            elm = elms[i];
            break;
        }
    }
    return elm;
}

Демо: http://jsfiddle.net/naveen/H8j2A/

Aлучший метод, предложенный nnnnnn

function GetElementInsideContainer(containerID, childID) {
    var elm = document.getElementById(childID);
    var parent = elm ? elm.parentNode : {};
    return (parent.id && parent.id === containerID) ? elm : {};
}

Демо: http://jsfiddle.net/naveen/4JMgF/

Назовите его как

var e = GetElementInsideContainer("div1", "edit1");

Answer 2

var x = document.getElementById("parent").querySelector("#child");
// don't forget a #

или

var x = document.querySelector("#parent").querySelector("#child");

или

var x = document.querySelector("#parent #child");

или

var x = document.querySelector("#parent");
var y = x.querySelector("#child");

например.

var x = document.querySelector("#div1").querySelector("#edit2");

Answer 3

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

Вы должны использовать класс или просто перебирать входы и отслеживать индекс.

Попробуйте что-то вроде этого:

var div2 = document.getElementById('div2');
for(i = j = 0; i < div2.childNodes.length; i++)
    if(div2.childNodes[i].nodeName == 'INPUT'){
        j++;
        var input = div2.childNodes[i];
        alert('This is edit'+j+': '+input);
    }

JSFiddle

Answer 4

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

Вы можете изменить свой HTML-код на это:

<div id="div1" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>
<div id="div2" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>

Затем вы можете получить первый элемент в div1 с помощью селектора CSS, например:

#div1 .edit1

Вкл в JQuery:

$("#div1 .edit1")

Или, если вы хотите перебрать элементы в одном из ваших элементов, вы можете сделать это следующим образом:

$("#div1 input").each(function(index) {
    // do something with one of the input objects
});

Если бы я не мог использовать фреймворк, такой как jQuery или YUI, я бы взял Sizzle и включил его для своей логики селектора (это тот же движок селектора, что и внутри jQuery), потому что манипулирование DOM в значительной степени легче с хорошим библиотека селектора.

Если бы я не смог использовать даже Sizzle (что привело бы к значительному снижению производительности разработчика), вы могли бы использовать простые функции DOM для обхода дочерних элементов данного элемента.

Вы бы использовали функции DOM, такие как childNodes или firstChild и nextSibling, и вам нужно было бы проверить nodeType, чтобы убедиться, что вы получили только те элементы, которые вам нужны. Я никогда не пишу код таким образом, потому что он гораздо менее продуктивен, чем использование библиотеки селекторов.

Answer 5

Sample Html code   
 <div id="temp">
        F1 <input type="text" value="111"/><br/>
        F2 <input type="text" value="222"/><br/>
        F3 <input type="text" value="333"/><br/>
        Type <select>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        </select>
        <input type="button" value="Go" onclick="getVal()">
    </div>

Javascript

    function  getVal()
    {
        var test = document.getElementById("temp").getElementsByTagName("input");
        alert("Number of Input Elements "+test.length);
        for(var i=0;i<test.length;i++)
        {
          if(test[i].type=="text")
          {
            alert(test[i].value);
          }
       }
      test = document.getElementById("temp").getElementsByTagName("select");
      alert("Select box  "+test[0].options[test[0].selectedIndex].text);
    }

By providing different tag names we can get all the values from the div.

Answer 6

В HTML идентификаторы должны быть уникальными.Я предлагаю вам изменить свой код на что-то вроде этого:

<div id="div1" >
    <input type="text" name="edit1" id="edit1" />
    <input type="text" name="edit2" id="edit2" />
</div>
<div id="div2" >
    <input type="text" name="edit1" id="edit3" />
    <input type="text" name="edit2" id="edit4" />
</div>

Answer 7

К сожалению, это неверный HTML. Идентификатор должен быть уникальным во всем HTML-файле.

Когда вы используете Javascript document.getElementById(), это зависит от браузера, какой элемент он вернет, в основном это первый элемент с заданным идентификатором.

У вас не будет другого шанса переназначить свои идентификаторы или использовать атрибут class.