2017-11-23 14 views
-1

jQueryの:最後のセレクタは、それが動作しない理由を誰もが私に教えてくださいすることができます

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="odd" class="data_row"> 
 
    <td class="first data" style="min-width: 29px;">1</td> 
 
    </tr> 
 
</table>

を働いていません。どうすればそれを実行可能にすることができますか?なぜそれが機能しないのか説明してください。次回はそれを世話します。

+1

trは加算されません。セレクタが機能していません。 –

+0

try:last-child – Roy

+0

useには無効なHTMLがあります。クラス属性は2倍です。 –

答えて

0

$('.data_row').last().css('background', 'red');
.data_row { 
 
height:50px; 
 
width:60px; 
 
margin-bottom:10px; 
 
border:1px solid blue; 
 
display:inline-block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="data_row"></div> 
 
<div class="data_row"></div> 
 
<div class="data_row"></div>

$('.data_row').last()の代わりに、jQueryを使って$('.data_row:last')を使用してみてください。今、あなたは複数のクラスを使用しているのよう

+0

http://vsss.co.in/Admin/index.php/Printing/Sale_bill –

+1

で問題コードが動作していない問題はセレクタではなく、どちらも問題なく動作しています。問題は二重クラスの属性です。 –

+0

@ShahRushabhはい、うまくいきます。私の更新された答えを証明として確認してください。重複クラスも削除する必要があります – ProEvilz

5

HTML5 PRで参照属性、セクション8.1.2.3 Attributes

名ASCIIの大文字小文字を区別しません同じ開始タグ上に2つの以上の属性があってはいけません互いに一致する。

第2のclass属性は無視されますので、<TR>要素の単一クラス属性を使用する必要があります。代わりに

<tr class="odd" class="data_row"> 
</tr> 

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="odd data_row"> 
 
    <td class="first data" style="min-width: 29px;">1</td> 
 
    </tr> 
 
</table>

0

<tr class="odd data_row">  
</tr> 

は、私は、次のアプローチを使用して良い感じ。

$('table').append('<tr class="odd"> <td class="first data" style="min-width: 29px;"></td><td class="first data" style="min-width: 258px;" colspan="2"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 59px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 79px;"></td></tr>'); 

なぜですか?最後のTDを検索するためにJqueryを作成しているので、それ以降はそれに追加しますが、上記のコードは追加します。私はテーブルが照会され、挿入は常に最後に行われると思う。

0
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <title> </title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
$('.data').append('<tr class="odd"> <td class="first data" style="min-width: 29px;"></td><td class="first data" style="min-width: 258px;" colspan="2"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 59px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 79px;"></td></tr>'); 
$('.first').last().css("background-color", "red"); 

}); 
</script> 
</head> 
<body> 
<table class="data"> 


</table> 

</body> 
+0

あなたのコードには常に説明をつけて、snipper builder(ctrl + m)を使ってみてください。 –

関連する問題