jQuery 运行相同元素的函数？

Question

我有十几个相同的元素，其内容需要重新排列。我敢肯定这对 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() 移动，但这会将每个标题复制到每个标签中。我希望有一个函数会说，“对于这个 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)（或其他任何内容）的过滤器会的），那就太棒了！
我正在工作front-front结束；我只能使用小脚本来更改 HTML 和样式内容。

我想我刚刚把这种糟糕的语言搞得一团糟，如果答案是我现在应该知道的，我非常抱歉，但我们将不胜感激。谢谢！

Answer 1

您很接近，但您需要在选择器中更加明确。一种方法是使用 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

Answer 2

$("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>

jQuery 运行 相同元素的函数？

jQuery run function for identical elements?

each

jquery

prepend

jQuery 运行相同元素的函数？