Как получить набор идентификаторов DIV без JQuery

У меня есть куча ссылок с идентификаторами, которые соответствуют классам, прикрепленным к другим ссылкам. Я передаю идентификатор ссылки как переменную, а затем использую эту переменную, чтобы найти другие ссылки по классу с JavaScript. Вот пример кода:Как получить набор идентификаторов DIV без JQuery

var elements = document.getElementsByClassName(id); 
    for(var i=0; i<elements.length; i++){}

До сих пор так хорошо, что я могу делать все, что захочу, для тех связанных ссылок. Однако теперь я хочу получить идентификаторы div, в которых находятся эти ссылки. Есть ли способ использовать JavaScript для поиска id div ссылки без использования JQuery?

Прежде чем вы спросите, почему бы просто не использовать JQuery? Я новичок в этом и еще не научился JQuery. Кроме того, я хотел бы понять, как делать вещи в JavaScript, прежде чем я пытаюсь узнать что-то еще.

источник

2013-03-09 parap

В принципе, ваш элемент должен иметь метод id на нем для его вызова. Вы пробовали это? –

У него есть идентификатор ссылки. Есть ли простой способ вызова div id? – parap

Да, вы можете подойти к дому. – Hogan

Чтобы получить доступ к родительскому идентификатору элемента, вы можете использовать:

var elementId = elements[i].parentNode.id;

Смотрите здесь для получения дополнительной информации: Getting the parent div of element

Чтобы найти ближайший DIV родитель, вы должны быть в состоянии сделать что-то вроде этого:

var elements = document.getElementsByClassName(id); 
for(var i=0; i<elements.length; i++){ 
    var parent = elements[i].parentNode; 

    while (parent.localName != null && parent.localName.toLowerCase() != "div") { 
     parent = parent.parentNode; 
    } 

    if (parent != null && parent.id != null) { 
     var parentId = parent.id; 

     alert(parentId); 
    } 
}

РЕДАКТИРОВАТЬ: Просто добавлен нулевой контроль, если класс НЕ содержится ни в каком DIV.

Вот тест, который я использовал:

<html> 
<body> 
    <div id="asdf"> 
     <a href="#" class="blah">1</a> 
     <a href="#" class="blah">2</a> 
    </div> 
    <div id="asdf2"> 
     <span> 
      <a href="#" class="blah">3</a> 
      <a href="#" class="blah">4</a> 
     </span> 
    </div> 
    <!-- These two won't cause an alert since no DIV surrounds them --> 
    <a href="#" class="blah">5</a> 
    <a href="#" class="blah">6</a> 
    <div id="asdf3"> 
     <span> 
      <a href="#" class="blah">7</a> 
      <a href="#" class="blah">8</a> 
     </span> 
    </div> 

    <input type="button" onclick="run();return false;" value="Run" /> 

    <script> 
    // This will cause 6 alerts: asdf, asdf, asdf2, asdf2, asdf3, asdf3 
    function run() { 
     var elements = document.getElementsByClassName("blah"); 
     for(var i=0; i<elements.length; i++){ 
      var parent = elements[i].parentNode; 

      while (parent.localName != null && parent.localName.toLowerCase() != "div") { 
       parent = parent.parentNode; 
      } 

      if (parent != null && parent.id != null) { 
       var parentId = parent.id; 

       alert(parentId); 
      } 
     } 
    } 
    </script> 
</body> 
</html>

источник

2013-03-09 04:54:04

Что делать, если div не является родительским? – Hogan

Проверьте мое обновление. Просто протестирован и, похоже, работает хорошо. –

+1 - очень приятно. – Hogan

Вы можете использовать element.parentNode.id, чтобы получить атрибут родительского элемента id.

источник

2013-03-09 04:56:23 Blender

Что делать, если div не является родительским? – Hogan

@Hogan: Затем вы реструктурируете свой HTML, чтобы вам не приходилось бегать вверх и вниз по дереву. – Blender

Сделал меня хихиканье. – Hogan

Как получить набор идентификаторов DIV без JQuery

ответ

Смежные вопросы