JQuery 附加到子元素

Posted 2023-02-22

【中文标题】JQuery 附加到子元素

【英文标题】：JQuery Append to a child element

【发布时间】：2021-01-20 03:40:39

【问题描述】：

我有一个这样的 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 行 div 标签内？我想要的最终结果如下。谢谢你。 （我是 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>

【参考方案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>

【讨论】：

感谢您的回复。这解决了我的问题。谢谢。我也可以使用find('.fc-daygrid-day-top.fc-daygrid-day-top') 这样的东西来访问fc-daygrid-day-top div 吗？

您可以使用任何有效的 CSS 选择器来查找元素。但是，您评论中的那个不起作用，因为您重复了两次相同的课程。

哦，我的错在那里..非常感谢你，我解决了我的问题，并学习了一些关于 jquery 的东西。再次感谢您

【参考方案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>