jQuery: получить родительский tr для выбранной радиокнопки - PullRequest
Новая
       31

jQuery: получить родительский tr для выбранной радиокнопки

59 голосов
/ 16 февраля 2012

У меня есть следующий HTML: 

<table id="MwDataList" class="data" width="100%" cellspacing="10px">
    ....

    <td class="centerText" style="height: 56px;">
        <input id="selectRadioButton" type="radio" name="selectRadioGroup">
    </td>

    ....
</table>

Другими словами, у меня есть таблица с несколькими строками, в каждой строке последней ячейки у меня есть переключатель.
Как я могу получить родительский ряд для выбранного переключателя?

Что я пробовал: 

function getSelectedRowGuid() {
    var row = $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr");
    var guid = GetRowGuid(row);
    return guid;
}

Но, похоже, этот селектор неверен.

Ответы [ 2 ]

153 голосов
/ 16 февраля 2012

Попробуйте это.

Вам не нужно добавлять префикс имени атрибута к @ в селекторе jQuery.Используйте метод closest(), чтобы получить ближайший родительский элемент, соответствующий селектору. 

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

Вы можете упростить свой метод следующим образом: 

function getSelectedRowGuid() {
    return GetRowGuid(
      $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr"));
}

closest() - получает первый соответствующий элементселектор, начиная с текущего элемента и продвигаясь вверх по дереву DOM.

В качестве примечания, идентификаторы элементов должны быть уникальными на странице, поэтому старайтесь избегать использования одинаковых идентификаторов для переключателей, которые яможно увидеть в вашей разметке.Если вы не собираетесь использовать идентификаторы, просто удалите их из разметки.

53 голосов
/ 23 мая 2014

Ответ 

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

Как найти ближайший ряд?

Использование .closest(): 

var $row = $(this).closest("tr");

Использование .parent():

Проверьте этот метод .parent().Это альтернатива .prev() и .next(). 

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

Получить все ячейки таблицы <td>

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

ПОСМОТРЕТЬ ДЕМО

Получить только определенное <td>

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

ПОСМОТРЕТЬ ДЕМО

Полезные методы

  • .closest() - получить первый элемент, соответствующий селектору
  • .parent() - получить родителя каждого элемента в текущем наборе соответствующих элементов
  • .parents() - получить предков каждого элемента в текущем наборе соответствующихэлементы
  • .children() - получить дочерние элементы каждого элемента в наборе соответствующих элементов
  • .siblings() - получить дочерние элементы каждого элементаэлемент в наборе совпадающих элементов
  • .find() - получить потомков каждого элемента в текущем наборе совпадающих элементов
  • .next() - получить ближайшего родственника каждого элемента в наборесогласованных элементов
  • .prev() - получить непосредственно предшествующего элемента каждого элемента в наборе сопоставленных элементов
...