0

現在、私はこのJQueryスクリプトを持っています

var img = $(this);
img.wrap('<div class="photo"></div>');
img.parent().append("<p>" + img.attr("alt") + "</p>");

これにより、次のことが正常に行われます。 

    <img src="photo.jpg" alt="caption">

これに

<div class="photo">
    <img src="photos.jpg" alt="caption"/>
        <p>caption</p>
</div>

画像に親としてのリンクがない限り、すべて問題ありません。<a href="#"><img私はそれを正しいhtmlにしたいので（私はうるさいです）、以下の結果の結果を改善することは満足のいくものです 

<a href="#">
<div class="photo">
    <img src="photos.jpg" alt="caption"/>
        <p>caption</p>
</div>
</a>

これに：

<div class="photo">
    <a href="#">
    <img src="photos.jpg" alt="caption"/>
    </a>
        <p><a href="#">caption</a></p>
</div>

これはこれまでの私のjQueryスクリプトです（これは動作しませんbc私は初心者です）ああ 

if(img.parent('a')){
    var targetLink = img.parent('a').attr('href').val();
    img.parent('a').wrap('<div class="photo"></div>');
    img.parent('div').append('<p><a href="'+targetLink+'">' + img.attr("alt") + '</p></a>');
}else{
     img.wrap('<div class="photo"></div>');
     img.parent().append("<p>" + img.attr("alt") + "</p>");
};

アドバイスや助けをいただければ幸い
です:)ありがとうございます！

回答を更新

var withLink = img.parent('a').length > 0,
targetPar = withLink ? img.parent() : img;

targetPar.wrap('<div class="photo"></div>');

if(withLink > 0){
    targetPar.parent().append('<p class="caption"><a href="'+img.parent().attr('href')+'">' + img.attr('title') + '</p></a>');
}else{
    img.parent().append('<p class="caption">' + img.attr('title') + '</p>');
}
4

2 に答える 2

2

問題はあなたの「if」ステートメントだと思います。

if (img.parent('a').length) {
  // ...
}

次に、<a>タグの「href」を取得しようとすると、「val（）」が呼び出されますが、これは必要ありません（または正しい場合でも）。

  var targetLink =  img.parent('a').attr('href');

また、問題とは関係ありませんが、「alt」属性は画像の内容を表すことになっていますが、「タイトル」は私が「キャプション」と呼ぶものに似ています。つまり、「代替」テキストは画像をまったく見ることができない人にも理解できる必要があり、「タイトル」は画像を見ることができる人に画像を説明するものでなければなりません。ただのニット。

于 2010-05-27T16:33:20.203 に答える
2

私はそれをこのようにします：

var img = $(this);
var target = $(img).parent();
if (target.is("a")) {
  target = target.parent();
}
target.wrap("<div>");
var div = target.parent();
div.addClass("photo");
$("<p>").attr("alt", $(img).attr("alt")).appendTo(div);

一部のブラウザーはinnerHTML、マークアップの作成に型メソッドを使用するのが非常に遅いため、diretcDOM要素の作成を使用する上記のアプローチを好む傾向があります。明確にするために、jQuery 1.4以降では、少なくとも次のようになります。

$("<p class='photo'>...</p>')...

使用しますinnerHTMLが：

$("<p>").addClass("photo").text("...");

を使用しdocument.createElement()ます。

于 2010-05-27T16:33:50.453 に答える