Как получить ближайший родительский ИЛИ родного брата, который соответствует селектору?

0

Учитывая таблицу:

<table border>
    <tr>
        <th rowspan=3>H1</th>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <th rowspan=3>H2</th>
        <td>21</td>
    </tr>
    <tr>
        <td>22</td>
    </tr>
    <tr>
        <td>23</td>
    </tr>
</table>

Предположим, что у нас есть событие на "td", которое должно искать ближайший "th" (пересекая DOM вверх). Например, при нажатии на 1, 2 или 3, он должен возвращать H1. При нажатии на 21,22,23 он должен вернуть H2.

Есть идеи?

  • 0
    Посмотрите на братьев и сестер, если один соответствует, используйте его, иначе посмотрите на родителей.
  • 0
    Покажите нам свою попытку, и мы можем помочь там, где у вас возникли трудности
Показать ещё 5 комментариев
Теги:

5 ответов

0
Лучший ответ

Как насчет этого:

$('td').click(function () {
    if ($(this).parent().has('th').length > 0) {
        $(this).parent().find('th').css('background', 'red');
        //alert('first row!');
    } else {
        $(this).parent().prevAll('tr').has('th').first().find('th').css('background', 'red');
    }
})

В основном я сначала проверяю, выбрана ли первая строка, строка, содержащая <th>.
Если это не так, я буду искать все предыдущие элементы <tr> (Перейти к началу структуры DOM). Всякий раз, когда у кого есть элемент <th> он будет в запросе .prevAll. Я выберу первый, который был выбран.
Теперь мы выбираем <th> в выбранном <tr>.

Надеюсь, это не "сверху" ^^

jsFFiddle

Поделиться
  • 0
    Это определенно работает. Я просто надеялся, что найдется более «элегантное» решение, которое будет включать в себя написание функции.
  • 0
    Посмотрите, что вы имеете в виду под «элегантным», это один большой селектор jQuery. Вы можете разделить селектор, чтобы он выглядел более элегантно, но он просто сделал один большой селектор :)
0

Вы можете использовать

$(this).parent().prevAll('tr').add($(this).parent()).has('th').last().find('th');

демонстрация

Поделиться
0

Плагин может быть излишним, но это работает:

http://jsfiddle.net/eVpHG/

$.fn.myTh = function () {
    var $elem = this.first();    

    var $th = $elem.siblings('th');    
    if ($th.length)
        return $th;

    else
        return $elem.parent('tr').prev('tr').children('th');

};
Поделиться
0

Структура HTML, которую вы проверяете, может охватывать разные ветки, поэтому вам нужно написать рекурсивную функцию для проверки элементов sibling th а если их нет, то дети из ближайших родственников tr элементов. Попробуй это:

$('td').click(function() {
    alert(findTh($(this).closest('tr')));
});

function findTh($row) {
    var $th = $('th', $row), 
        $prevRow = $row.prev('tr');

    if ($th.length) {
        return $th.text();
    }
    else if ($prevRow.length) {
        return findTh($prevRow);
    }
    else {
        return '';
    }
}

Пример скрипки

Поделиться
  • 0
    Привет Рори, в моем первоначальном столе чего-то не хватало. Это будет реальный сценарий: jsfiddle.net/f7gc2. Я просто хотел сделать это без написания функции для этого. Я думал, что есть «элегантный» способ сделать это.
0

Выберите родных и родственных элементов, затем используйте ближайший.

$(this).siblings().addBack().closest("th");

если один из братьев и сестер соответствует селектору, он выбирает первый, иначе он пересекает дерево и возвращает первое, что соответствует.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню