帮助使用jQuery操作子/父元素

时间:2010-05-27 16:27:25

标签: javascript jquery jquery-selectors parent-child dom-manipulation

目前我有这个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我是菜鸟)aha

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>');
}

2 个答案:

答案 0 :(得分:2)

我认为问题是你的“if”语句,应该是:

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

然后,当你试图获得<a>标签的“href”时,你正在调用“val()”并且这不是必需的(或者是正确的,甚至是):

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

此外,尽管与您的问题无关,但“alt”属性应该描述图像的内容,而“标题”更像我称之为“标题”。换句话说,“alt”文本对于根本看不到图像的人来说应该是可以理解的,而“标题”则描述了一个可以看到它的人的图像。只是一个人。

答案 1 :(得分: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()