Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2011, 12:27
Новичок на форуме
Отправить личное сообщение для pavel_martin Посмотреть профиль Найти все сообщения от pavel_martin
 
Регистрация: 22.04.2011
Сообщений: 3

Непонятка с 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>.

В чём тут дело? Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2011, 13:12
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

А почему бы самому не посмотреть?
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2011, 13:18
Новичок на форуме
Отправить личное сообщение для pavel_martin Посмотреть профиль Найти все сообщения от pavel_martin
 
Регистрация: 22.04.2011
Сообщений: 3

Цитата:
А почему бы самому не посмотреть?
Я смотрел. element.parentNode.nextSibling это [object Text].
Мне непонятно откуда он взялся
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2011, 13:42
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

Переносы строк — это тоже текстовая нода.
Проверяйте nodeType — у текстовых элементов он равен 3, у обычных 1.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2011, 13:49
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от 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 - это очень ненадежно, потому что зависит от конкретной верстки.
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2011, 14:05
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

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


Надёжное получение nextSibling.
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2011, 14:53
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Или использовать nextElementSibling (правда, могут быть проблемы с кроссбраузерностью)
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2011, 15:21
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

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


Оптимизированный вариант.
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2011, 16:01
Новичок на форуме
Отправить личное сообщение для pavel_martin Посмотреть профиль Найти все сообщения от pavel_martin
 
Регистрация: 22.04.2011
Сообщений: 3

Ах вот оно что! Большое всем спасибо за прояснение ситуации!
Ответить с цитированием
  #10 (permalink)  
Старый 14.04.2013, 01:54
Новичок на форуме
Отправить личное сообщение для Halloween Посмотреть профиль Найти все сообщения от Halloween
 
Регистрация: 26.02.2012
Сообщений: 3

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

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что за непонятка???? macexa jQuery 1 29.08.2010 10:39
Непонятка с переопределением курсора GRIG Events/DOM/Window 4 26.03.2010 15:29
firefox не умеет работать с соседями смотрите функцию jjvod Общие вопросы Javascript 8 03.12.2008 16:15
nextSibling в IE Andrew Events/DOM/Window 20 01.11.2008 11:32