我有一个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进行更新会更容易更改,如果更新有任何改变。
有没有人有任何建议或指出我正确的方向?
答案 0 :(得分:0)
我还没有真正理解你想要做什么但是根据我的理解,我会要求你尝试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');
});
答案 1 :(得分:0)
如果我正确理解了这个问题,我认为您的问题是您正在选择所有元素,然后添加新内容。您需要指定要追加的确切元素。通常我会说使用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>
我建议全页运行。