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>`);
});

这将返回类似于以下内容的东西。（这是当我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>

我想将行1追加到行2的

标签中？我希望得到以下最终结果。谢谢。（我是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>

- Hansaka Sandaruwan

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>

- Rory McCrossan

---

谢谢您的回复。这解决了我的问题。谢谢。我还可以使用类似于find('.fc-daygrid-day-top.fc-daygrid-day-top')这样的方式来访问fc-daygrid-day-top div吗？ - Hansaka Sandaruwan

你可以使用任何有效的CSS选择器来查找元素。但是，你在评论中提到的那个不起作用，因为你重复了相同的类。 - Rory McCrossan

哦，我的错。非常感谢，我解决了我的问题，并学到了一些有关jQuery的东西。再次感谢。 - Hansaka Sandaruwan

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会将新节点插入到要添加的元素的第一个子节点之前，而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>

- FluffyKitten