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

【问题标题】：How to write content inside all div under a parent div?如何在父 div 下的所有 div 中写入内容？
【发布时间】：2015-01-13 23:46:20
【问题描述】：

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

<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>

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

【问题讨论】：

您的意思是要将<span>content</span> 添加到<div> 中的所有<div class="tp-bullets simplebullets custom"> 中吗？
你好！你能格式化源代码，并给出你想要实现的html示例吗？
@SpencerWieczorek 你明白了

标签： javascript jquery html pagination

【解决方案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

【讨论】：

假设我是否想要每个 div 中的不同内容？

【解决方案2】：

使用 jQuery：

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

【讨论】：

假设我是否想要每个 div 中的不同内容？
你希望每个 div 有什么内容？有图案吗？尝试使用 .each()

【解决方案3】：

纯Javascript

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

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

【讨论】：

【解决方案4】：

这是一个演示：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++;
        });
    });
});

【讨论】：

【解决方案5】：

只有 Javascript

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

【讨论】：

【解决方案6】：

一个更清晰的 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/

【讨论】：

【解决方案7】：

使用 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>');
});

【讨论】：