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 脚本（因为我是菜鸟，这不起作用）啊哈 

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”属性应该描述图像的内容，而“title”更像是我所说的“caption”。换句话说，“alt”文本应该对于完全看不到图像的人来说是可以理解的，而“title”则向可以看到图像的人描述图像。只是一点点。

于 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类型方法创建标记时异常缓慢，所以我倾向于使用上述方法，它使用 diretc DOM 元素创建。澄清一下，至少从 jQuery 1.4+ 开始：

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

使用innerHTML但：

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

使用document.createElement().

于 2010-05-27T16:33:50.453 回答