[英]JQuery Append to a child element
我有一個像這樣的 jQuery。
$.each($(".fc-daygrid-day "), function (key, val) {
var dateYMD = $(this).attr("data-date");
console.log(this);
$(this).append(`<div class="fc-dailytotal" id='dailytotal-" + dateYMD + "'></div>`);
});
它返回這樣的東西。 (這是我在console.log(this)
時得到的)
<td class="fc-daygrid-day fc-day fc-day-thu fc-day-future fc-day-other" data-date="2020-11-05">
<div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner"> <!-- line 2 -->
<div class="fc-daygrid-day-top"><a class="fc-daygrid-day-number">5</a></div>
<div class="fc-daygrid-day-events"></div>
<div class="fc-daygrid-day-bg"></div>
</div>
<div class="fc-dailytotal" id="dailytotal-" + dateYMD + "">0</div> <!-- line 1 -->
</td>
我想在第 2 行 div 標簽內附加第 1 行? 我想要的最終結果如下。 謝謝你。 (我是 JQuery 的新手)
<td class="fc-daygrid-day fc-day fc-day-thu fc-day-future fc-day-other" data-date="2020-11-05">
<div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner"> <!-- line 2 -->
<div class="fc-daygrid-day-top"><a class="fc-daygrid-day-number">5</a></div>
<div class="fc-dailytotal" id="dailytotal-" + dateYMD + "">0</div> <!-- line 1 -->
<div class="fc-daygrid-day-events"></div>
<div class="fc-daygrid-day-bg"></div>
</div>
</td>
您可以使用find()
定位子元素,然后使用after()
插入要直接在其下方顯示的內容。 另請注意,您的字符串連接語法不正確。 當您使用模板文字時,您需要使用${foo}
將值插入到字符串中。 嘗試這個:
$.each($(".fc-daygrid-day"), function (key, val) {
var dateYMD = $(this).attr("data-date");
$(this).find('.fc-daygrid-day-top').after(`<div class="fc-dailytotal" id='dailytotal-${dateYMD}'></div>`);
});
另外值得注意的是代碼可以改進。 首先使用data()
讀取data
屬性,以便結果具有更強的類型。 此外,考慮到您實際嘗試實現的目標,您根本不需要顯式的each()
循環。 您可以為after()
提供一個動態生成內容的函數。
$('.fc-daygrid-day .fc-daygrid-day-top').after(function() { let dateYMD = $(this).closest('.fc-daygrid-day').data('date'); return `<div class="fc-dailytotal" id="dailytotal-${dateYMD}">Example: ${dateYMD}</div>` });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td class="fc-daygrid-day fc-day fc-day-thu fc-day-future fc-day-other" data-date="2020-11-05"> <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner"> <div class="fc-daygrid-day-top"><a class="fc-daygrid-day-number">5</a></div> <div class="fc-daygrid-day-events"></div> <div class="fc-daygrid-day-bg"></div> </div> </td> </tr> <tr> <td class="fc-daygrid-day fc-day fc-day-thu fc-day-future fc-day-other" data-date="2021-12-15"> <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner"> <div class="fc-daygrid-day-top"><a class="fc-daygrid-day-number">10</a></div> <div class="fc-daygrid-day-events"></div> <div class="fc-daygrid-day-bg"></div> </div> </td> </tr> </tbody> </table>
而不是使用append
,你只需要使用prepend
:
$.each($(".fc-daygrid-day"), function (key, val) {
var dateYMD = $(this).attr("data-date");
$(this).prepend(`<div class="fc-dailytotal" id='dailytotal-" + dateYMD + "'>prepending</div>`);
});
prepend
將在您要添加到的元素的第一個子元素之前插入新節點,而append
將它插入到最后一個 child 之后。 參考: MDN Docs for prep
工作示例:
$.each($(".fc-daygrid-day"), function (key, val) { var dateYMD = $(this).attr("data-date"); $(this).prepend(`<div class="fc-dailytotal" id='dailytotal-" + dateYMD + "'>ADDED</div>`); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table><tr> <td class="fc-daygrid-day fc-day fc-day-thu fc-day-future fc-day-other" data-date="2020-11-05"> <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner"> <!-- line 2 --> <div class="fc-daygrid-day-top"><a class="fc-daygrid-day-number">5</a></div> <div class="fc-daygrid-day-events"></div> <div class="fc-daygrid-day-bg"></div> </div> </td> </tr></table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.