獲取剛剛單擊的元素的同胞div並插入div jQuery返回[object Object]
[英]get sibling div of element just clicked and insert into div jquery is returning [object Object]
問題描述
單擊某些鏈接時，我正在使用featherlight.js創建模式彈出窗口。 我在一系列div中有幾個相同的類鏈接，每個鏈接都彈出一個模態，顯示不同的圖片和標題。 圖片正確彈出。 我正在嘗試向其中添加一些jquery：檢索並找到剛剛單擊的錨元素的上一個同級div，然后將該div的html 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（內容），並使用class =“ modal-caption”將該內容前置/返回/插入到div中。 我需要在此特定父級中找到div，因為我有幾個帶有class =“ timeline-box-inner”的div，其中需要提取標題並將其作為標題添加到模態中。
僅供參考，這對我不起作用，它返回為：[object Object]
2 個解決方案
解決方案1
0 已采納 2017-01-15 02:04:34
以下片段應做您想要的。
$('.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>
div單擊后如何插入DOM元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.