Скрыть следующего брата элемента с помощью Javascript

У меня есть элемент, полученный из document.getElementById('the_id'). Как я могу получить его следующего брата и скрыть его? Я пробовал это, но это не сработало:

elem.nextSibling.style.display = 'none';

Ошибка Firebug: elem.nextSibling.style is undefined.


javascript hide element siblings
person DisgruntledGoat    schedule 15.05.2009    source источник

Ответы (4)


arrow_upward
36
arrow_downward

это потому, что Firefox считает пробелы между узлами элементов текстовыми узлами (тогда как IE этого не делает) и, следовательно, использование .nextSibling для элемента получает этот текстовый узел в Firefox.

Полезно иметь функцию для получения следующего узла элемента. Что-то вроде этого

/* 
   Credit to John Resig for this function 
   taken from Pro JavaScript techniques 
*/
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType !== 1);
    return elem;        
}

тогда вы можете сделать

var elem = document.getElementById('the_id');
var nextElem = next(elem); 

if (nextElem) 
    nextElem.style.display = 'none';
person Russ Cam    schedule 15.05.2009
comment
Но elem все еще может быть нулевым. - person Gumbo; 15.05.2009
comment
Нет, это не так. Он просто гарантирует, что nextSibling не будет доступен, когда elem «не соответствует действительности» или elem.nodeType == 1. Но если такого элемента нет, elem будет просто последним родственным узлом, независимо от его типа. - person Gumbo; 15.05.2009
comment
Вот пример: var elem = document.createElement(div); elem.appendChild(document.createTextNode(foo)); elem.appendChild(document.createTextNode(bar)); оповещение (следующий (elem.firstChild) === ноль); // истинный - person Gumbo; 15.05.2009
comment
просто хотел подтвердить, что это другой ответ stackoverflow.com/a/15322350/4119808, но не в фокусе. Что-то не так с этим? - person Gaurav Aggarwal; 27.04.2016

arrow_upward
12
arrow_downward

Взгляните на API обхода элементов, этот API перемещается между Только узлы элементов. Это позволяет следующее:

elem.nextElementSibling.style.display = 'none';

И, таким образом, избегает проблемы, присущей nextSibling потенциальному получению узлов, отличных от Element (например, TextNode, содержащий пробелы)

person cobaco    schedule 10.03.2013
comment
TY TY TY TY за добавление этого ответа! - person Alisso; 01.05.2013
comment
я думаю, что это лучший и самый простой способ, я не понимаю, почему люди не сосредоточились.. - person Gaurav Aggarwal; 27.04.2016

arrow_upward
2
arrow_downward

Ошибка Firebug: elem.nextSibling.style не определен.

потому что nextSibling может быть текстовым узлом или другим типом узла

do {
   elem = elem.nextSibling;
} while(element && elem.nodeType !== 1); // 1 == Node.ELEMENT_NODE
if(elem) elem.style.display = 'none';
person Rafael    schedule 15.05.2009
comment
+1 Для проверки, не является ли elem нулевым, перед доступом к атрибуту style. - person Gumbo; 15.05.2009

arrow_upward
0
arrow_downward

Попробуйте перебрать дочерние элементы этого элемента, используя что-то вроде:

var i=0;
(foreach child in elem)
{
   if (i==0)
   {
     document.getElementByID(child.id).style.display='none';
    }
}

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

person Community    schedule 15.05.2009