Доступ к элементам DOM без идентификатора

Question

У меня есть страница около 500 дел, как показано ниже.

<div onclick='test()' class='test>
     <ul class='innermenu'>
       <li>1</li>
       .....
      </ul>
  </div>

когда вызывается тестовая функция, необходимо скрыть меню (innermenu), которое вызывает эту функцию.

мои проблемы

1. однозначно идентифицирует div без использования id

2. Как скрыть только один конкретный уль.

Answer 1

ОК, сначала быстрое исправление, хотя это не лучший способ использовать JS на вашей странице:

Изменить вызов на это:

<div onclick="test(this);" class="test">

Затем, в тесте, используйте это:

function test(el){
   var uls = el.getElementsByTagName('ul');
   for(var i = 0; i < uls.length; i++){
      if(uls[i].className == 'innermenu'){
         uls[i].style.display = "none";
         break;
      }
   }
}

Это скроет только ребенка ul из div, по которому щелкнули.

Лучший способ

ОК, для более длинного ответа. Либо прикрепите события после факта, используя attachEvent и addEventListener, либо используйте библиотеку, такую ​​как jQuery, чтобы помочь вам. Вот сырое решение:

Настройте HTML таким образом (без onclick):

<div class="test">

И затем в самом конце вашего HTML-кода поместите это:

<script type="text/javascript">
    var divs = document.getElementsByTagName('div');
    function test(){
      var uls = this.getElementsByTagName('ul');
      for(var i = 0; i < uls.length; i++){
         if(uls[i].className == 'innermenu'){
            uls[i].style.display = "none";
            break;
         }
      }
    };

    for(var i = 0; i < divs.length; i++){
      var div = divs[i];
      if(div.className !== "test") continue;
      if(window.addEventListener){
         div.addEventListener( 'click', test, true ); //FF, Webkit, etc
      } else if (window.attachEvent) {
         div.attachEvent('onclick', test); // IE
      } else {
         div.onclick = test; // Fallback
      }
    }
</script>

Теперь у вас нет кода JavaScript в вашем HTML, и вы можете избавиться от дополнительного параметра в функции test.

Answer 2

Есть метод

document.getElementsByClassName

, но поддерживается не во всех браузерах.

1011 * Javascript *

function test(elem)
{
    var childElem = elem.children[0];
    childElem.style.display = 'none';
}

<div onclick='test(this)' class='test'>
    <ul class='innermenu'>
        <li>1</li>
        <li>2</li>
    </ul>
</div>

Если вы можете использовать jQuery, вы можете сделать что-то вроде этого

$("div.test").click(function(){
    $(this).find("ul.innermenu").hide();
});

Answer 3

Если getElementsByClassName поддерживается не всеми браузерами, как указано в @ rahul , вы можете перебрать dom и найти его самостоятельно - при условии, что существует только один <ul> с именем класса "innermenu"

var uls = document.body.getElementsByTagName("ul");
var len = uls.length;
for(var i = 0; i < len; i++)
{
  var ul = uls.item(i);
  if(ul.getAttribute("class") == "innermenu")
  {
    ul.style.display = "none";
    break;
  }
}

Answer 4

Попробуйте передать "this" в качестве параметра:

<div onclick='test(this)' class='test>
 <ul class='innermenu'>
   <li>1</li>
   .....
  </ul>

 function test(sender) {
        //sender is DOM element that is clicked
        alert(sender.id);
    }

Answer 5

Если вы не хотите назначать идентификаторы, вы можете попробовать это, чтобы скрыть div, на который нажимают:

<div onclick="hideMe(this);" class='test>

<script>
 function hideMe(elem)
 {
   elem.style.display = 'none';
 }
</script>