Как я могу получить img src и текст из удаленных элементов, используя JQuery?

Question

Не могли бы вы помочь, поскольку у меня возникли некоторые проблемы с получением текста заголовка и источника элемента изображения для создания списка элемента, по которому щелкнули.Но я объясню лучше с некоторым кодом:

Во-первых, у меня есть элемент div, который выглядит следующим образом:

<div class="main_page_entry">
    <div class="main_item_desc">
        <img class="main_item_pic" src="blah.jpg" />
        <h6><a href="blah.html">Item Title</a></h6>
        <span class="icon"> <img src="icon.png" /></span><br />            
        <span class="address">Some address</span>
        <p class="item_desc">More blahs and links for description </p>
    </div>

    <div class="item_controls">
        ...
        <a href="#" class="add_to_list">
            <img src="add_icon.gif" />Add to List
        </a>
        ...
    </div>  
</div>

Он состоит из большого div, содержащего два меньших.Что я хочу сделать, это следующее: Когда я нажимаю на ссылку «Добавить в список», я хотел бы получить только текст внутри и источник main_item_pic, чтобы создать элемент списка с этими двумя.

Итак, вот мой письменный код:

$('a.add_to_list').live('click', function() {
    var name = $(this).closest('h6').text();
    var source = $(this).closest('.main_item_pic').src;

    $('<li class="hide list_entry"><span class="entry_title">'+
        name+'</span><button class="remove_entry"></button>'+
        '<img class="list_entry" src="'+source+'" /></li>')
        .appendTo('#favs_list ul')
        .show('slow');
});   

Очевидно, что это не работает!Я пробовал разные решения, которые я здесь читаю, например:

var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');

ну да ладно ... пока не повезло.Есть идеи?Заранее спасибо!

Answer 1

Попробуйте вернуться к вершине и снова спуститься вниз по правой ветви DOM:

var src = $(this).closest('.main_page_entry')               // Back to the top
                 .find('.main_item_desc .main_item_pic')    // And down again.
                 .attr('src');

Метод closest поднимается по дереву DOM через ваших предков:

Получите первый элемент-предок, соответствующий селектору, начиная с текущего элемента и продвигаясь вверх по дереву DOM.

Таким образом, он не перейдет ни к одному изродственные ветви.Затем, как только вы окажетесь у соответствующего предка, вы используете find, чтобы вернуться обратно, find аналогично $(), но использует указанный элемент, а не document в качестве корня:

Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.

Answer 2

Метод closest находит только ближайшего предка, который соответствует выбранному вами селектору.Поскольку h6 и img, которые вы ищете, не являются предками элемента, для которого вы их вызываете, он не найдет их.Вам нужно найти ближайший элемент, который содержит как элемент, из которого вы ищете, так и элементы, которые вы пытаетесь найти, и использовать его как промежуточный шаг в поиске:

Answer 3

Прежде всего, если этот контент не добавляется динамически или в реальном времени (другими словами, если контент загружается с исходной загрузкой HTML), вам не нужно использовать функцию .live ().

Кроме того, почему вы используете .closest ()?Не могли бы вы просто сделать:

 <img class="main_item_pic" ref='pic1' src="blah.jpg" />
 <a ref='pic1' href="#" class="add_to_list">
    <img src="add_icon.gif" />Add to List
 </a>


$('a.add_to_list').click(function(){
 var ref  = $(this).attr('ref');
 var src  = $("img[ref='" + ref + "']").attr('src');
 var name = $('h6 a').text();
});

Answer 4

Метод closest () ищет предков. Ваш h6 и img не являются предками вашей ссылки.

Кроме того, я думаю, вы не хотите $ ('h6'). Html (), но $ ('h6 a'). Html ()