JQuery - получить все строки, кроме первого и последнего

Question

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

$("#id").find("tr:gt(0)")

мне нужно объединить это с not("tr:last") как-нибудь, может быть?

Answer 1

Отбросьте gt(), так как я предполагаю, что он чуть медленнее, чем :first.

Используйте not() в сочетании с :first и :last:

$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');

Большинство браузеров автоматически добавляют элемент tbody в разметку таблицы, если он отсутствует, поэтому непосредственный дочерний селектор не удался & ndash; не было элементов <tr> как непосредственных потомков тега <table>.

Я не уверен на 100%, что так делают все браузеры, так что было бы безопаснее просто добавить <tbody> вручную. В противном случае вам нужно немного понюхать и вы не сможете сделать это как один вкладыш:

if($('table#tbl > tbody').size() > 0) {
    $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
} else {
    $('table#tbl > tr').not(':first').not(':last').addClass('highlight');
}

Надеюсь, это решит вашу проблему!

Answer 2

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

.not(':first').not(':last')

Answer 3

почему не только это?

$('table tr:not(:first-child):not(:last-child)');

также работает как чистый селектор CSS.

Answer 4

Вы можете объединить методы .not() в один, разделив селекторы запятыми:

$('#id tr').not(':first, :last');
$('#id tr:not(:first, :last');

Обратите внимание, что второй недопустим в чистом CSS, только как селектор jQuery. Для чистого CSS вам придется использовать ответ @ Sumit.

Answer 5

Вы также можете использовать метод .slice() , чтобы удалить первый / последний элемент из набора:

$('table tr').slice(1, -1);

Метод .slice() по существу создает новый объект jQuery с подмножеством элементов, указанных в начальном наборе. В этом случае будут исключены элементы с индексом 1 и -1, которые являются первым / последним элементами соответственно.

Пример:

$('table tr').slice(1, -1).css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

---

Конечно, вы также можете отрицать :first-child / :last-child, используя :not():

$('table tr:not(:first-child):not(:last-child)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

---

Вы также можете комбинировать :nth-child(n+2) и :nth-last-child(n+2):

$('table tr:nth-child(n+2):nth-last-child(n+2)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

Answer 6

Странные размещенные предложения не сработали, все должны работать! НО ...

Если это не сработало, сделайте это так ... немного медленнее, но ДОЛЖНО РАБОТАТЬ! ПОПРОБУЙТЕ:

$('table#tbl tr').addClass('highlight');
$('table#tbl tr:first-child').removeClass('highlight');
$('table#tbl tr:last-child').removeClass('highlight');