相同元素的jQuery运行功能？答案

【问题标题】：jQuery run function for identical elements?相同元素的jQuery运行功能？
【发布时间】：2021-02-25 18:21:44
【问题描述】：

我有十几个相同的元素，它们的内容需要重新排列。我敢肯定这对于 jQuery 大师来说是一个简单的问题，但我完全是新手，这个问题让我很困惑。

<li class="label">
   <div class="title">Card Title</div>
   <div class="content">
      <div class="header"></div>
      <img src="...">
   </div>
</li>

应该是这样的：

<li class="label">
   <div class="content">
      <div class="header">
         <div class="title">Card Title</div>
      </div>
      <img src="...">
   </div>
</li>

我尝试通过 .prependTo() 移动，但这会将每个标题复制到 each 标签中。我希望有一个函数可以说，“对于这个 li.label，将它的 div.title 移动到 div.header 中”，但我不知道正确的语法。我试过了：

$("div.title").prependTo(".header"); （将每个标题移动到每个卡片中）

$($("div.content")[0]).closest("div").prev().prependTo($(".header")[0]); （做的工作，但只针对第一张卡）

$("li.label").each(function() 
   {$("div.title").prependTo("div.header")
});

（只是一团糟）

需要注意的几点：

我在页面上有其他带有标签的列表不希望这种情况发生，所以如果我可以包含:contains(card)（或其他任何内容）的过滤器，那将太棒了！
我在前端工作；我只能使用小脚本来更改 HTML 和样式内容。

我想我刚刚把这种糟糕的语言搞砸了，如果答案是我现在应该知道的，我非常抱歉，但任何帮助都将不胜感激。谢谢！

【问题讨论】：

我不确定我是否按照您的想法来选择要修改的列表。它们是否有类或您可以定位的其他内容，例如具有 ID 的父元素？

标签： jquery each prepend

【解决方案1】：

$("li.label").each(function(index) {
  if ($(this).find(".title:contains('Card')").length > 0) {
/// cheak if title contans Card
    let title = $(this).find(".title");
    $(this).find(".title").remove();
/// save that elements and then remove it
    $(this).find(".header").append(title);
/// append back title to header
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="label">
  <div class="title">Card Title</div>
  <div class="content">
    <div class="header">header</div>
    <img src="...">
  </div>
</li>

<li class="label">
  <div class="title">NOT</div>
  <div class="content">
    <div class="header">header</div>
    <img src="...">
  </div>
</li>

<li class="label">
  <div class="title">Card Title</div>
  <div class="content">
    <div class="header">header</div>
    <img src="...">
  </div>
</li>

【讨论】：

【解决方案2】：

您已经接近了，但您希望在选择器中更加明确。一种方法是将each() 函数与$this() 一起使用：

$('li.label').each(function() {
    // $(this) refers to this particular list item as a jQuery object
    let titleEl = $(this).find('.title');
    let headerEl = $(this).find('.header');

    titleEl.prependTo(headerEl);
});

Fiddle demo

【讨论】：