jQueryとこのスコープの範囲

Question

私はこの機能の範囲で何かが欠けている、私は自動的に画像にクラスを追加しますが、テキストはそれらの周りに正しくラップされないようにアライメントを変更しません。私は単純に$（ "img"）を使うことはできません。attr（ "align"、 "left"）;それはページ上のすべてのイメージを変更するので、コンテキスト '' img 'を使用していると言っていましたが、これは私が思うように動作していないし、絶対に何もしません。

どのように私はそれぞれのimgを関連付けられたクラスに合わせて変更できるか知っていますか？それがなぜ機能するのかに関するボーナスポイント。

編集：codepenデモ

Answer 1

あなたのためにその参考になっ思います。このような何か：

function align_image(){ 
 
    console.log("func called"); 
 
    if ($(this).hasClass('alignleft')) { 
 
     $(this).attr("align","left"); 
 
    } 
 

 
    if ($(this).hasClass('alignright')) { 
 
     $(this).attr("align","right"); 
 
    } 
 
} 
 

 
$('img').each(align_image);

コメントで示唆したように（および他の回答で）、あなたも同じことを達成するために、特定のjQueryのセレクタを使用することができます。

$('img.alignleft').attr("align","left"); 
 
$('img.alignright').attr("align","right");

最後に、w3schoolsによれば、i mg align属性は廃止され、代わりにCSSプロパティを使用する必要があります。このような何か作業をする必要があります：

img.alignleft { 
 
    float: left; 
 
} 
 

 
img.alignright { 
 
    float: right; 
 
}

を私は、これは、すべての角度をキャプチャしたいと考えています。

Answer 2

これを試してみてください。私はあなたが画像のそれぞれを反復処理することができると思う、とイテレータ関数は「この」を参照してIMG DOM要素を指し

function align_image(){ 
    console.log("func called"); 
    if ($('img').hasClass('alignleft')) { 
    $(this).attr("align","left"); 
    } 

    if ($('img').hasClass('alignright')) { 
    $(this).attr("align","right"); 
    } 
} 
align_image(); 

Answer 3

あなた活用フィルタ方式あなたの要素を見つけて、このようなATTRを追加する：

$("img").filter('.align-right').attr("align","right") ;       
$("img").filter('.align-left').attr("align","left") ; 

See here