jQuery附加到子元素

问题描述

我有一个这样的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-&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>

解决方法

您可以使用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"),val) {
  var dateYMD = $(this).attr("data-date");
  $(this).prepend(`<div class="fc-dailytotal" id='dailytotal-" + dateYMD + "'>prepending</div>`);
});

prepend会在要添加元素的第一个子元素之前插入新节点，而append会在最后一个子元素之前插入新节点 >。参考：MDN Docs for prepend

工作示例：

$.each($(".fc-daygrid-day"),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>