Найдите ячейки, которые не находятся в заголовке и только в первом столбце таблицы, используя JQuery

Question

Раньше у меня было что-то вроде

$(elem).parents('li').find(...)

Где элемент был элементом списка, поэтому было легко получить ссылку на все элементы списка. Однако теперь я добавил дополнительную информацию и решил использовать таблицу, где список вписывается в таблицу следующим образом.

[заголовок] [заголовок] [заголовок]

[список 1] [ячейка] [ячейка]

[список 2] [ячейка] [ячейка]

[список 3] [ячейка] [ячейка]

Я немного застрял, создавая эквивалентный JQuery, выполняющий .find () только для ячеек, в которых есть элементы списка. Элементы списка всегда находятся в крайних левых ячейках таблицы, исключая заголовок.

Вот как выглядит таблица в html.

<table id="my-table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>list item 1</td>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
<tr>
<td>list item 2</td>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
</table>

Answer 1

Если вам нужны ячейки, в которых есть элементы списка, вам понадобится селектор : has () , поэтому будет что-то вроде этого:

• $(elem).closest('table').find('td:has(li) ...') - если вам нужно все li в таблице
• или $(elem).closest('tr').find('td:has(li) ...') - если вам нужны все li в необработанном виде

Answer 2

Приведенное ниже решение выведет соответствующие элементы, сначала <td> в каждой строке, в <div id="#results"

Рабочий пример: http://jsfiddle.net/6faUf/

HTML:

<table border="5">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
    </thead>
    <tbody>
        <tr><td><ul><li>List1</li></ul></td><td>2</td><td>3</td></tr>
        <tr><td><ul><li>List2</li></ul></td><td>2</td><td>3</td></tr>
    </tbody>
</table>
<div id="results">The list values are: </div>

JavaScript (jQuery):

$('td:first-child').each(function(){
    var value = $(this).text();
    $("#results").append(value);
});

Answer 3

Это даст вам только первый столбец в каждой строке.

var rows = $('tr :nth-child(1)', '#my-table').not('th');

Если вы хотите выполнить цикл и что-то сделать с каждым из них сейчас, просто используйте:

rows.each(function()
{
   //Do something with the columnn
});

Answer 4

Если вы используете thead и tbody, вы сможете найти строки только в теле.

Измените разметку на что-то вроде этого:

<table>
    <thead>
       ... header rows ...
    </thead>
    <tbody>
       ... body rows ...
    </tbody>
</table>

ТогдаВы можете просто включить tbody в свой селектор jquery, чтобы найти только строки, которые являются строками тела.

Что-то вроде #my-table tbody td:first-child.Где first-child даст вам первый столбец.

Answer 5

Использование:

$(elem).closest('tr').find(...)

Answer 6

Если li всегда находятся в первой ячейке каждой строки, это должно работать:

$('td:first-child>li')