get sibling div of element just clicked and insert into div jquery is returning [object Object]
Question
I am using featherlight.js to create modal pop ups when some links are clicked. I have several of the same-class links, in a series of divs, that each pop up into a modal showing different pictures and captions. The pictures are popping up in the modal correctly. I am trying to add some jquery to: retrieve and find the previous sibling div of the anchor element just clicked, and insert that div's html div into a div in the modal pop up (image caption). this is what I have for jquery:
"<div class='modal-caption'>" + jQuery("#modalTrigger").click(function(){
var caption = jQuery(this).prev("div");
var partcap = caption.html();
return partcap; })
,"</div>"
This is the 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>
I want to get the html (content) of id="mdc" inside this particular div and prepend/return/insert that content into div with class="modal-caption". I need to find the div within this particular parent because I have several div's with the class="timeline-box-inner" where the captions need to be pulled and added as a caption in the modal.
FYI this isn't working for me, it is returning as: [object Object]
2 answers
solution1
0 ACCPTED 2017-01-15 02:04:34
The following fragment should do what you want.
$('.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>
solution2
0 2017-01-15 02:08:39
您可以在<head></head> 。
<script> jQuery(document).ready(function(){ $("#modalTrigger").click(function(){ $(".modal-caption").html($(this).prev("#mdc").html()); }); }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.