Помогите с манипулированием дочерними / родительскими элементами с помощью jQuery - PullRequest
Новая
       26

Помогите с манипулированием дочерними / родительскими элементами с помощью jQuery

0 голосов
/ 27 мая 2010

В настоящее время у меня есть этот скрипт 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>');
}

Ответы [ 2 ]

2 голосов
/ 27 мая 2010

Я бы сделал это так: 

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 для создания разметки, поэтому я предпочитаю придерживаться вышеуказанного подхода, который использует создание DOM-элементов diretc. Чтобы уточнить, по крайней мере, начиная с jQuery 1.4+: 

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

использует innerHTML, но: 

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

использует document.createElement().

2 голосов
/ 27 мая 2010

Я думаю, что проблема в вашем утверждении "если", которое должно быть: 

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

Затем, когда вы пытаетесь получить «href» тега <a>, вы вызываете «val ()», и это не обязательно (или даже корректно): 

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

Кроме того, хотя и не относится к вашей проблеме, атрибут «alt» должен описывать, о чем идет речь, тогда как «заголовок» больше похож на то, что я бы назвал «подписью». Другими словами, текст «alt» должен быть понятен людям, которые вообще не могут видеть изображение, в то время как «заголовок» описывает изображение человеку, который может увидеть его. Просто гнида.;

...