Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Непонятка с nextSibling (https://javascript.ru/forum/events/16791-neponyatka-s-nextsibling.html)

pavel_martin 22.04.2011 12:27

Непонятка с nextSibling
 
Добрый день!
Я столкнулся с непонятной цепочкой кода:

HTML
<tr>
                        <td class="label">имя: * </td>
                        <td>
                            <input id="name" type="text" />
                        </td>
                        <td class="note"></td>
                    </tr>

На элемент <input id="name" type="text" /> подцеплен обработчик onblur
который проверяет пустой ли он. Если пустой то в ячейку <td class="note"></td> Записывается текст о том, что его нужно заполнить.
JavaScript
Код:

if (!isNotEmpty(element)) {
        element.style.border = '1px solid #FD796A';
        element.style.color = '#C70000';

        var noteColumn = element.parentNode.nextSibling.nextSibling;
        noteColumn.innerHTML = 'это поле нужно заполнить';
     
        return false;
..

Этот фрагмент не мой.
Вопрос! Почему для получения ячейки <td class="note"></td> нужно выполнить цепочку кода element.parentNode.nextSibling.nextSibling?
Ведь element.parentNode это содержащий element td, а element.parentNode.nextSibling это и есть <td class="note"></td>.

В чём тут дело? Заранее благодарен.

Sweet 22.04.2011 13:12

А почему бы самому не посмотреть?

pavel_martin 22.04.2011 13:18

Цитата:

А почему бы самому не посмотреть?
Я смотрел. element.parentNode.nextSibling это [object Text].
Мне непонятно откуда он взялся

Matre 22.04.2011 13:42

Переносы строк — это тоже текстовая нода.
Проверяйте nodeType — у текстовых элементов он равен 3, у обычных 1.

Sweet 22.04.2011 13:49

Цитата:

Сообщение от Matre
Переносы строк — это тоже текстовая нода.

Поясню. Имеется ввиду следующее:
<div id="test">&nbsp;</div>
<div>&nbsp;</div>
<script>
var test = document.getElementById('test');
alert( test.nextSibling )
</script>
<div id="test">&nbsp;</div><div>&nbsp;</div>
<script>
var test = document.getElementById('test');
alert( test.nextSibling )
</script>
Отсюда вывод: .nextSibling.nextSibling - это очень ненадежно, потому что зависит от конкретной верстки.

Matre 22.04.2011 14:05

function next(element) {
	while (element = element.nextSibling)
		if (element.nodeType === 1)
			return element;
	return null;
}


Надёжное получение nextSibling.

B@rmaley.e><e 22.04.2011 14:53

Или использовать nextElementSibling (правда, могут быть проблемы с кроссбраузерностью)

Matre 22.04.2011 15:21

function next(element) {
	if ("nextElementSibling" in element)
		return element.nextElementSibling;
	while (element = element.nextSibling)
		if (element.nodeType === 1)
			return element;
	return null;
}


Оптимизированный вариант.

pavel_martin 22.04.2011 16:01

Ах вот оно что! Большое всем спасибо за прояснение ситуации! :)

Halloween 14.04.2013 01:54

А не подскажете, почему перестал работать этот самый перескок?

http://msufootball.ru/tournaments/op...4/application/

<script>
function Jump(x){
    var ml = ~~x.getAttribute('maxlength');
    if(ml && x.value.length >= ml){
        do{
            x = x.nextSibling;
        }
        while(x && !(/text/.test(x.type)));
        if(x && /text/.test(x.type)){
            x.focus();
        }
    }
}
</script>


Часовой пояс GMT +3, время: 22:27.