4

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

2 回答 2

2

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

于 2020-10-05T09:24:58.297 回答
1

而不是使用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插入它。参考：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"> <!-- 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>

于 2020-10-05T09:34:48.527 回答