4

同じクラスの 2 つの div があり、jQuery を使用して両方の div.productListの 2 番目を操作したいと考えています。<img>

私は次のものを持っています。

$('div.productList').each(function(){
    $('img:last-child').css('margin-left','10px');
});

マークアップ (部分)

<div class="productList">
<img src="images/parts/" width="120" height="120" alt="" title="" />
<img class="last" src="images/parts/" width="120" height="120" alt="" title="" />

.each()usingは各 div を循環し、最後の を見つけると想定しimgましたが、これはうまくいきません。

誰かがこれで私を正しい方向に向けてもらえますか?

ありがとう。

4

5 に答える 5

5

それを行うにはcssを使用してください：

div.productList img:last-child {
    margin-left: 10px;
}
于 2012-04-28T11:06:46.973 に答える
2

「より良い」純粋な CSS の方法

それにはCSSを使用する必要があるというイーサンに同意しますが、last-childセレクターの使用（彼が推奨するように）は、imgタグが実際に最後のhtml要素である 場合にのみ機能します.productlist（つまり、タグの後に他の 、などがないdiv場合span- img-例を参照)。部分的なマークアップしか表示されていないため、それは私にはまったくわかりません。それが単なる一連のimgタグである場合は、イーサンの答えを使用してください。そうでない場合は...

より良い CSS3 ソリューションは、 を使用するlast-of-typeことです。これは、探しているタイプの要素 (imgこの場合) のみを検索するためです。したがって、他の要素がそれに続く場合、それは問題ではありません。

.productList img:last-of-type {
    margin-left: 10px;
}

CSS3 をサポートしていない古いブラウザーの場合、2 つのimgタグが実際にマークアップ内で次々に配置され、それらが でペアになっている唯一のimgタグである.productList場合、それらの古いブラウザーの解決策 (新しい CSS3 でも機能します)ブラウザー) は、隣接する兄弟セレクターを使用することになります。

.productList img + img {
    margin-left: 10px;
}
于 2012-04-28T13:24:33.647 に答える
1

イーサンが言ったように CSS を使用してそれを行うか、jQueryでそれを行う場合、.each ステートメントはまったく必要ありません。jQuery を使用して最後の項目を選択するだけです。

$('.productList img:last-child').css('margin-left','10px');

ここでそれを参照してください：

http://jsfiddle.net/Willyham/PM8eG/

CSS ソリューション:

div.productList img:last-child {
    margin-left: 10px;
}
于 2012-04-28T11:11:58.870 に答える
0 
$('div.productList').each(function(){
  $('img:last', this).css('margin-left','10px')
});

CSS ソリューション:

div.productList img:last-child {
    margin-left: 10px;
}
于 2012-04-28T10:57:32.510 に答える
0

働くフィドル 

   $('div.productList').each(function(){
        $(this).find('img:last').css('margin-left','50px');
   });
于 2012-04-28T11:25:18.117 に答える