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

Ответ 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/

Лучший метод, предложенный 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");

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 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")

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

$("#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, чтобы убедиться, что у вас есть только те элементы, которые вы хотели. Я никогда не пишу код таким образом, потому что он намного менее эффективен, чем использование библиотеки селекторов.

Ответ 5

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

Ответ 6

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.

Ответ 7

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

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

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

Ответ 8

Вы можете попробовать следующее: $ ( "# div1 # edit1" )