プレーンJS：80％幅の要素を作る100％IFを含む画像

Question

私のワードプレスの記事では、テキストの段落を80％幅にしたいが、画像はコンテンツ領域の100％幅にしたい。しかし画像は<p>タグで囲まれているので、ポスト内のすべてのpタグを見つけ出す小さなスクリプトを作成し、img要素が含まれている場合はpタグにCSSの100％幅を指定したクラスを付けます。

私はgetElementByIdをでそれを行う方法を見つけました：ここ

var kids = document.getElementById('content').getElementsByTagName('p'); 

    var looper = function(t){ 
    for(i=0; i<kids.length; i++){ 
     if(t[i].firstChild.tagName === "IMG"){ 
     t[i].setAttribute("class", "postimg"); 
     } 
    } 
    }; 

looper(kids); 

はjsbinです：http://jsbin.com/meculi/

私はコンテンツ領域は、クラスを持っている場合に最良を続行するかどうかはわかりませんが、IDなしgetElementsByTagNameはメソッドではありませんgetElementsByClassName.

Answer 1

getElementsByClassNameは、配列のような要素リストを返します。したがって、その結果に対して要素メソッドを呼び出すことはできません。結果をループしてそれぞれのループを実行することができますが、より単純なソリューションをお勧めします：querySelectorAll

var kids = document.querySelectorAll('.content p'); 

これにより、ループコードが動作するNodeListがkidsになります。あなたも、さらに一歩それを取るとquerySelectorAllは、画像を含む段落を見つけるの仕事をさせことができます：

var paragraph_images = document.querySelectorAll('.content p > img'); 

for (var i = 0; i < paragraph_images.length; i++) { 
    paragraph_images[i].parentNode.className += ' postimg'; 
}