获取刚刚单击的元素的同胞div并插入div jQuery返回[object Object]
[英]get sibling div of element just clicked and insert into div jquery is returning [object Object]
问题描述
I am using featherlight.js to create modal pop ups when some links are clicked. 
单击某些链接时，我正在使用featherlight.js创建模式弹出窗口。 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. 我在一系列div中有几个相同的类链接，每个链接都弹出一个模态，显示不同的图片和标题。 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). 我正在尝试向其中添加一些jquery：检索并找到刚刚单击的锚元素的上一个同级div，然后将该div的html div插入到模式弹出窗口（图像标题）中。 this is what I have for jquery: 这就是我的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: 这是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". 我想在此特定的div中获取id =“ mdc”的html（内容），并使用class =“ modal-caption”将该内容前置/返回/插入到div中。 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. 我需要在此特定父级中找到div，因为我有几个带有class =“ timeline-box-inner”的div，其中需要提取标题并将其作为标题添加到模态中。
FYI this isn't working for me, it is returning as: [object Object] 仅供参考，这对我不起作用，它返回为：[object Object]
2 个解决方案
解决方案1
0 已采纳 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>
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.