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。要做到这一点，我虽然使用像这样的追加：

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而不是追加

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，但我知道你不想改变现有的代码，所以你可以做两件事：

一个附加：一次性附加所有内容，我更喜欢将其作为较少的代码，但根据添加的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>

我建议全页运行。

使用javascript追加移动多个div

2 个答案: