Почему undefined и как получить дочерний элемент?

Question

[littleguga]

Вот весь код
Задача состоит в получении первого div элемента в нажатом столбце.
1. Почему при нажатии на первую колонку выводит column0, а не block3?
2. Почему при нажатии на последние 2 столбца выводит undefined?

Заранее благодарен за ответ!

Answer 1

[Михаил Горячкин]

Ответ на первый ваш вопрос вы можете посмотреть вот тут first-child. Вы не к тому применяете селектор :first-child.
Надо так:

$("div#" + thisColID + " div:first-child").attr('id');

Можно сделать попроще. Рабочий вариант будет выглядеть примерно так:

var getBlockInColumn = function() {
	var thisColID = $(this).attr('id'), children = $("div#" + thisColID).children();
        if (children.length) {
            alert($(children[0]).attr('id'));
        }
};

$(document).ready(function(){
	$(".column").on("click",getBlockInColumn);
});

Comments

[littleguga]

Понял, спасибо!

Answer 2

[fr33zy]

alert($("div#" + thisColID + ":first-child").attr('id'));

Замените на:

alert($("div#" + thisColID + " div:first-child").attr('id'));

Или просто добавьте пробел перед :first-child.

Почему?
Псевдокласс :first-child указывает на первый дочерний элемент указанного вида.
Вот что у вас получается: div#someid:first-child.
Что должно быть: div#someid :first-child

По видимому, в "неправильном" селекторе "div#someid:first-child" сначала ищется div:first-child, а потом уже результат фильтруется по id. Т.к. первый div - это column0, то div:first-child всегда выбирает его.
В первом случае все работает, поскольку первый элемент имеет id="column0". У остальных элементов id другие, поэтому они не проходят дополнительную фильтрацию.

Comments

[littleguga]

А в таком случае, куда еще можно добавить селектор '[class != block0]'?

[fr33zy]

littleguga:
Если правильно понял, то:
$("div#" + thisColID + " > :not(.block0)")

Но такой селектор выбирает только прямых потомков элемента (>). Если нужно выбрать первый вложенный не .block0-элемент, то нужно использовать: div#someid :not(.block0)

Сделать что-то вроде "div#someid :first-child:not(.block0)" не получится

[littleguga]

fr33zy: Спасибо! А в чем разница вложенного элемента и прямого потомка?

[fr33zy]

.. div class="a"
.... div class="b"
...... div class="c"

Для .a:
.b и .c - вложенные
.b - прямой потомок

[littleguga]

fr33zy: спасибо еще раз!

Answer 3

[uam]

у меня ваще везде undefined браузер фаерфокс 36

Comments

[littleguga]

У меня Chrome последний.