使用 javascript append 移动多个 div

Question

我有一个 wordpress 插件，可以按如下输出顺序创建滑块：

<ul>
    <li>
        <img src="">
        <div class="wp1s-caption-wrapper">
            <div class="wp1s-caption-title">
            <div class="wp1s-caption-content">
    </li>
    <!-- each slide as this same setup within the li, currently I have three slide so therefore 3 sets of the above li-->
</ul>

现在我需要做的是在 div 类 wp1s-caption-wrapper 中输入一个 div（hh-caption），然后在其中插入 wp1s-caption-title 和 wp1s-caption-content。为此，我虽然使用 append 像这样：

var j = jQuery.noConflict();
j(document).ready(function(){
    j(".wp1s-caption-wrapper").append(j(".hh-caption"));
    j(".hh-caption").append(j(".wp1s-caption-title"));
    j(".hh-caption").append(j(".wp1s-caption-content"));
});

现在这会将 div hh-caption 输入到每个 wp1s-caption-wrapper div 中，但它会放置每个出现的 wp1s-caption-title 和 wp1s-caption-content。我有三个带有标题和说明的滑块，所以每个 hh-wrapper 包含 3 个标题和说明。我只希望每个 hh-caption 正上方的标题和内容（在标题和内容下方追加 hh-caption）移动到其中，而不是所有出现。

我不想直接编辑插件代码，因为任何更新很可能需要我重做所有内容，但如果更新更改了任何内容，我在自己的页面中使用 javascript 进行更改会更容易。

有没有人有任何建议或指出正确的方向？

Answer 1

我还没有真正理解您要做什么，但据我了解，我会要求您尝试 appendTo 而不是 append

var j = jQuery.noConflict();
j(document).ready(function(){

    j(j('.hh-caption').appendTo('.wp1s-caption-wrapper');

   j(j('.wp1s-caption-title').appendTo('.hh-caption');

});

Answer 2

如果我正确理解了这个问题，我认为您的问题是您选择了所有元素，然后添加了新内容。您需要指定要附加到的确切元素。通常我会说使用id，但我知道您不想更改现有代码，因此您可以做两件事：

One Append：一次性添加所有内容，我更喜欢这样，因为它的代码更少，但根据您添加的 html 的复杂程度，这可能不适合。

多个附加：附加标题包装器，然后在其中添加标题等。假设您始终将其添加到末尾并使用 jquery .last()

我希望这会有所帮助，抱歉有点冗长，但想很好地展示一下。

$("#addCaption1").click(function() {
  captionImage = "https://images.unsplash.com/photo-1473182446278-fa0683411d10?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=";
  captionTitle = "This is a new caption";
  captionContent = "This caption was added via jquery.";
  addCaption1(captionImage, captionTitle, captionContent);

});

$("#addCaption2").click(function() {
  captionImage = "https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=compress,format&fit=crop&w=1199&h=791&q=80&cs=tinysrgb&crop=";
  captionTitle = "This is a new caption";
  captionContent = "This caption was added via jquery.";
  addCaption2(captionImage, captionTitle, captionContent);
});


function addCaption1(imgUrl, title, content) {
  var caption = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"><div class="wp1s-caption-title"><strong>' + title + '</strong><div class="wp1s-caption-content"><p>' + content + '</p></div></div></div></li>';

  $("#sidebar").append(caption);
}

function addCaption2(imgUrl, title, content) {
  var captionWrapper = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"></div></li>';
  $("#sidebar").append(captionWrapper);
  $(".wp1s-caption-wrapper").last().append('<div class="wp1s-caption-title"><strong>' + title + '</strong></div>');
  $(".wp1s-caption-wrapper").last().find(".wp1s-caption-title").append('<div class="wp1s-caption-content"><p>' + content + '</p>');
}

button {
  padding: 5px;
}
ul {
  list-style: none;
}
li {
  margin: 5px;
  padding: 5px;
  background: #ccc;
  color: #333;
  width: 180px;
  display: inline-block;
}
li img {
  width: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addCaption1">One append</button>
<button id="addCaption2">Multiple appends</button>
<ul id="sidebar">
  <!-- Item 1 -->
  <li>
    <img src="https://images.unsplash.com/photo-1473220464492-452fb02e6221?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=">
    <div class="wp1s-caption-wrapper">
      <div class="wp1s-caption-title"><strong>This is a title for Item 1</strong>
        <div class="wp1s-caption-content">
          <p>This is some content for Item 1</p>
        </div>
      </div>
    </div>
  </li>
  <!-- Item 2 -->
  <li>
    <img src="https://images.unsplash.com/photo-1467791702337-32e58d17bb6d?dpr=1&auto=compress,format&fit=crop&w=1199&h=796&q=80&cs=tinysrgb&crop=">
    <div class="wp1s-caption-wrapper">
      <div class="wp1s-caption-title"><strong>This is a title for Item 2</strong>
        <div class="wp1s-caption-content">
          <p>This is some content for Item 2</p>
        </div>
      </div>
    </div>
  </li>
  <!-- Item 3 -->
  <li>
    <img src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
    <div class="wp1s-caption-wrapper">
      <div class="wp1s-caption-title"><strong>This is a title for Item 3</strong>
        <div class="wp1s-caption-content">
          <p>This is some content for Item 3</p>
        </div>
      </div>
    </div>
  </li>
</ul>

我建议全页运行。