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

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>

现在它正在打印空分页。我想在 div 下的所有 div 中写 <span>content</span> having class-name=tp-bullets simplebullets custom using javascript 有人请帮我做这个。我对js非常基础。

Answer 1

使用jQuery：

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

Answer 2

这是一个演示：http://jsfiddle.net/swm53ran/66/ 我不认为你打算 <div class="tpclear"></div> 有 <span>Content</span> 因为它看起来像是一个清除项目符号而不是内容项目符号，所以我使用 class .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 3

纯Javascript

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

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

Answer 4

您只需要做：

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

使用JQuery .find(), .each() and .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

一个更清晰的 js 与 jsfiddle

<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 中写入内容？

How to write content inside all div under a parent div?

html

javascript

jquery

pagination