Question

我打算为滑块手动编写分页。现在这个分页就像这样打印

<div class="tp-bullets  simplebullets custom">
    <div class="bullet first"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet selected"></div>
    <div class="bullet"></div>
    <div class="bullet last"></div>
    <div class="tpclear"></div>
</div>

现在它的印刷空白分页。我想在c <span>content</span>使用lass-name=tp-bullets simplebullets custom的div下的所有div中写javascript，请帮助我这样做。我对js非常基本。

Answer 1

你只需要这样做：

$(".tp-bullets").children("div").html("<span>content</span>");

<强> Example Here

如果您想添加不同的项目，可以执行以下操作：

var myItems = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];

$(".tp-bullets").children("div").each(function( index ) {
    $(this).html("<span>"+myItems[index]+"</span>");
});

<强> Example Here

Answer 2

使用jQuery：

$('.tp-bullets > div').append('<span>content</span>')

Answer 3

这是一个演示：http://jsfiddle.net/swm53ran/66/ 我认为您不希望<div class="tpclear"></div>拥有<span>Content</span>，因为它似乎是一个清除子弹而不是内容项目符号，因此我使用了类.bullet来设置内容。

$(document).ready(function() {
    $('.add').on('click', function() {
        $('.bullet').html('<span>Content</span>');
    });
});

希望这有帮助！

编辑：如果您想为每个div使用不同的文本，可以使用：http://jsfiddle.net/swm53ran/67/

$(document).ready(function() {
    var divArray = [
        'Bullet 1 Content',
        'Bullet 2 Content',
        'Bullet 3 Content',
        'Bullet 4 Content',
        'Bullet 5 Content',
        'Bullet 6 Content',
        'Bullet 7 Content',
    ]
    $('.add').on('click', function() {
        var count = 0;
        $('.bullet').each(function () {
            $(this).html('<span>' + divArray[count] + '<span>');
            count++;
        });
    });
});

Answer 4

使用纯Javascript

var div = document.getElementById('divID');

div.innerHTML = '<span>content</span>';

Answer 5

使用 JQuery .find() ， .each() 和 .append() 方法：

var divs = $( "div" );
var contents=["content1", "content2", "content3", "content4", "content5", "content6", "content7", "content8"];
$('.tp-bullets').find(divs).each(function() {
    $(this).append('<span>'+contents[i]+'</span>');
});

Answer 6

只有Javascript

[].slice.call(document.querySelectorAll('div.tp-bullets.simplebullets.custom')).forEach(function(el){
    el.innerHTML = '<span>Content</span>';
});

Answer 7

使用jsfiddle再一个明确的js

<div class="tp-bullets  simplebullets custom">
    <div class="bullet first"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet selected"></div>
    <div class="bullet"></div>
    <div class="bullet last"></div>
    <div class="tpclear"></div>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var x = document.querySelectorAll(".bullet");

for(var i = 0; i< x.length; i++){
    x[i].innerHTML = "red";
}}
</script>

http://jsfiddle.net/eL852m86/1/

如何在父div下的所有div内写入内容？

7 个答案: