web-dev-qa-db-ja.com

jquery-最初と最後を除くすべての行を取得します

最初と最後の行を除くテーブルのすべての行にクラスを動的に追加したい。行を識別するためにCSSクラスを行に割り当てずにこれをどのように行いますか？私は現在、最初の行を除いてすべてを取得しています

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

これをnot("tr:last")と組み合わせる必要がありますか？

jqueryjquery-selectors
52
user210757

:firstよりも少し遅いと思われるので、gt()を削除します。

not()を:firstおよび:lastと組み合わせて使用​​します。

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

ほとんどのブラウザは、テーブルマークアップにtbody要素が存在しない場合、自動的に追加します。そのため、直接の子セレクターが失敗しました。<tr>タグの直接の子として<table>要素はありません。

これがすべてのブラウザーで行われる方法であるとは100％確信が持てないので、手動で<tbody>を追加する方が安全です。それ以外の場合は、少しスニッフィングする必要があり、1つのライナーとしてはできません。

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');
}

これで問題が解決することを願っています！

97
Tatu Ulmanen

これを試して：

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

なぜこれだけではないのですか？

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

純粋なCSSセレクターとしても機能します。

12
ProblemsOfSumit

セレクターをコンマで区切ることにより、.not()メソッドを1つに結合できます。

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

2番目は純粋なCSSでは無効であり、jQueryセレクターとしてのみ有効であることに注意してください。純粋なCSSの場合は、@ Sumitの答えを使用する必要があります。

4
GreeKatrina

.slice() method を使用して、セットから最初/最後の要素を削除することもできます。

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

.slice() method は、基本的に、初期セットで指定された要素のサブセットを持つ新しい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>_

もちろん、:not()を使用して_:first-child_/_:last-child_を否定することもできます：

$('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>_
2
Josh Crozier

投稿された奇妙な提案は機能しませんでした。すべて機能するはずです！しかし...

うまくいかなかった場合は、このようにしてください。トライ：

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