JQuery 附加到子元素

Question

我有一个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>`);
});

其中 returns 是这样的。（这是我 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-&quot; + dateYMD + &quot;">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-&quot; + dateYMD + &quot;">0</div> <!-- line 1 -->
    <div class="fc-daygrid-day-events"></div>
    <div class="fc-daygrid-day-bg"></div>
  </div>
</td>

Answer 1

您可以使用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>

Answer 2

而不是使用 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 将在您要添加到的元素的第一个 child 之前插入新节点 ，而 append 将其插入 在最后一个child之后。参考：MDN Docs for prepend

工作示例：

$.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">  <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>

JQuery 附加到子元素

JQuery Append to a child element

html

jquery

dom-manipulation

jquery-append