获取刚刚单击的元素的同级 div 并插入 div jquery 返回 [object Object]

Question

我正在使用 featherlight.js 在单击某些链接时创建模态弹出窗口。我有几个 same-class 链接，在一系列 div 中，每个链接都会弹出一个显示不同图片和标题的模式。图片在模态中正确弹出。我正在尝试将一些 jquery 添加到：检索并找到刚刚单击的锚元素的前一个同级 div，然后插入 div 的 html div 进入模态弹出窗口中的 div（图片说明）。这就是我要 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>

我想在这个特定的 div 中获取 id="mdc" 的 html（内容），并且 prepend/return/insert 将内容 div 与 class="modal-caption"。我需要在这个特定的 parent 中找到 div 因为我有几个 div 和 class="timeline-box-inner" 需要拉出字幕和在模式中添加为标题。

仅供参考，这对我不起作用，它返回为：[object Object]

Answer 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>

Answer 2

您可以在 <head></head> 中使用它。

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

获取刚刚单击的元素的同级 div 并插入 div jquery 返回 [object Object]

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

html

javascript

wordpress

jquery

featherlight.js