Js/jQuery ile ebeveyn ve alt öğeleri oluşturma

Question

Js/jquery'de başlangıç ​​yapıyorum. Ben bu yapıyı kodlamak istiyorum js/jQuery:

<div class="box"> 
    <p>1</p> 
    <div class="content"><span>Lorem</span></div> 
</div> 

<div class="box"> 
    <p>2</p> 
    <div class="content"><span>Ipsum</span></div> 
</div> 

<div class="box"> 
    <p>3</p> 
    <div class="content"><span>Dolor</span></div> 
</div> 

<div class="box"> 
    <p>4</p> 
    <div class="content"><span>Sit</span></div> 
</div> 

<div class="box"> 
    <p>5</p> 
    <div class="content"><span>Amet</span></div> 
</div> 

Bu kodu vardır:

function addDivs(n) { 

    for(var i=1; i<=n; i++) { 

     var parentP = $("<p>"+i+"</p>"); 
     var parentContent = $("<div class='content'></div>"); 

     var boxClassDiv = document.createElement("div"); 
     document.body.appendChild(boxClassDiv); 
     boxClassDiv.setAttribute("class", "box"); 
     $("body").prepend(boxClassDiv, [parentP, parentContent]); 
     } 
    } 

    window.onload = function getFuncs() { 
     addDivs(16); 
    } 

İşte

olan keman:

https://jsfiddle.net/ds6wj38k/2/ buldum bu ve denenmiş gibi birkaç benzer sorular koduma eklemek için ama ayarlayamıyorum.

Teşekkürler.

var p = $('<p>').text(1); 

Ve nihayet içeride sınıfa content ve span ile div: Sonra

var box = $('<div>').addClass('box'); 

sen bir rakamla bir p istiyorum: Herşeyden

Answer 1

Yani ilk sınıfa box ile div gerekir:

var content = $('<div>').addClass('content'); 
var span = $('<span>').text('any'); 
content.append(span); 

Böylece ihtiyacınız olan öğeleri oluşturdunuz.

var listItem = box.append(p).append(content); 

Ve body eklemek: Zaman bunları birleştirmek için!

$('body').append(listItem); 

nihai kodu:

function addDivs(n) { 
    for (var i = 1; i <= n; i++) { 
    var box = $('<div>').addClass('box'); 
    var p = $('<p>').text(i); 

    var content = $('<div>').addClass('content'); 
    var span = $('<span>').text('any'); 
    content.append(span); 

    var listItem = box.append(p).append(content); 

    $('body').append(listItem); 
    } 
} 

window.onload = function getFuncs() { 
    addDivs(16); 
} 

Kontrol dışarı kod çevrimiçi:http://jsbin.com/xeyugubefu/edit?js,output

İşte

Answer 2

Bunu yapmak önermek görecektir:

function addDivs(words) { 
    words.forEach(function (word, i) { 
     $('body') 
      .append($('<div>').addClass('box') 
       .append($('<p>').text(i+1)) 
       .append($("<div>").addClass('content').append($('<span>').text(words[i])))); 
    }); 
}; 

$(function getFuncs() { 
    var words = 'Lorem ipsum dolor sit amet'.split(' '); 
    addDivs(words); 
}); 

jQuery, yukarıdaki kodun gösterdiği yöntem zincirlemesini desteklemek için tasarlanmıştır. ayrı jQuery ile içerik bina, ayrıca $(callback) olarak yazabilirsiniz bir jQuery.ready çağrısı ile window.onload değiştirmelisiniz

Not.