Prototype Selector: простые примеры

Question

Я только начинаю прототип, я был на jquery раньше.

Я не могу найти простых примеров в интернете о том, как:

• Выбор всех элементов с одинаковым идентификатором на странице (Я делаю это, но это работает только для первого элемента: $('mydiv').hide())
• Выбор элемента div, содержащегося в другом элементе div, по его идентификатору.
• скрывает все элементы, имеющие класс myClass.

Answer 1

Как упоминалось выше, у вас не должно быть одного и того же идентификатора на странице более одного раза. Помимо несоответствия стандартам, это рецепт потенциальных проблем, так как вы не знаете, как на это отреагирует ваш JavaScript. Вместо этого использует классы.

Выбор всех элементов, имеющих одинаковые id класс на странице (я делаю это, но это работает только для первого элемента: $ ('mydiv'). hide ())

Использование $$:

$$('.myclass')

Выбор div, который содержится в еще один div по их идентификатору.

Использование $$:

$$('div#outer div#inner')

скрывает все элементы, имеющие myClass класс.

Используйте $$, each() и hide()

$$('.myClass').each(function(d) {
  d.hide();
});

$$ ваш друг.

Answer 2

Несколько вещей, которые я бы добавил.

$$('.myClass').each(function(d) {
  d.hide();
});

можно заменить следующим:

$$('.myClass').invoke("hide");

Кроме того, будьте осторожны с использованием $$, на странице с большим dom обычно быстрее нацелить родительский элемент с помощью $, а затем используйте select() для вашего селектора

так

$$('div#outer div#inner') etc....

можно переписать так:

$('parent_of_inner_and_outer').select('div#outer div#inner') etc....

Answer 3

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

       var spans = $$('span');
        for (i = 0; i < spans.length; i++) {
           var span = spans[i];
           if (span.id == 'add_bookmark_image_' + id) {
              span.hide();
           }
           if (span.id == 'is_bookmarked_image_' + id) {
              span.show();
           }
        }