get sibling div of element just clicked and insert into div jquery is returning [object Object]

Я использую featherlight.js для создания модальных всплывающих окон при щелчке по некоторым ссылкам. У меня есть несколько ссылок одного и того же класса, в серии divs, которые появляются в модальном показе различных изображений и подписей. Фотографии появляются в модальном правильно. Я пытаюсь добавить некоторые jquery: получить и найти предыдущий родственный div элемента якоря просто щелкнул, и вставить, что div html div в div в модальном всплывающем окне (Image caption). это то, что у меня есть для jquery:

    "<div class='modal-caption'>" + jQuery("#modalTrigger").click(function(){
var caption = jQuery(this).prev("div");
var partcap = caption.html();
return partcap; })

,"</div>"

Это html:

<div class="timeline-box-inner animate-right animated">
<span class="arrow"></span>
<div class="date">1974 - 1976</div>
    <h3>High School</h3>
    <h4>
    <a href="http://whs.westside66.org/">
    Westside</a>
    </h4>

    <div id="mdc" class="display-none-caption">Just A Test</div>
    <a id="modalTrigger" class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image"></a>

Я хочу получить html (содержимое) id= «mdc»внутри этого конкретного div и добавить/вернуть/вставить это содержимое в div с class=»modal-caption». Мне нужно найти div в этом конкретном родителе, потому что у меня есть несколько div с классом=»timeline-box-inner», где подписи должны быть вытащены и добавлены в качестве подписи в модальном.

FYI это не работает для меня, это возвращается как: [object Object]

2 ответа

  1. Следующий фрагмент должен делать то, что вы хотите.

    $('.education-modal-link').on('click', function(e) {
      // prevent the default <a href> click behaviour
      e.preventDefault();
      // get the text from the sibling <div>
      var text = $(this).prev('div').text();
      // find the first div with a 'modal-caption' class
      // and add the text
      $('div.modal-caption').eq(0).html(text); 
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="date">1974 - 1976</div>
    <h3>High School</h3>
    <h4><a href="http://blah.org/">Westside</a></h4>
    <div class="display-none-caption">Just A Test 1</div>
    <a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a>
    <div class="display-none-caption">Just A Test 2</div>
    <a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a>
    <div class="display-none-caption">Just A Test 3</div>
    <a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a>
    <div class='modal-caption'>I'm going to change!</div>

  2. Вы можете использовать это в <head></head>.

    <script>
    jQuery(document).ready(function(){
    $("#modalTrigger").click(function(){
    $(".modal-caption").html($(this).prev("#mdc").html());
    });
    });
    </script>