我有一个像这样的 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>
关于html - JQuery 附加到子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64205810/