用Js / jQuery创建父元素和子元素

Question

我是js / jquery的初学者。 我想用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>

我有这段代码：

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);
    }

这是小提琴：https://jsfiddle.net/ds6wj38k/2/

我发现了一些类似的问题并试图添加到我的代码中，但我无法调整。

感谢。

Answer 1

首先，您需要一个div课程box：

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

然后你想要一个带有数字的p：

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

最后在div内加了content和span个字段：

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

所以你创建了你需要的元素。是时候把它们结合起来了：

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

并添加到body！

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

最终代码：

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);
}

在线查看代码： http://jsbin.com/xeyugubefu/edit?js,output

Answer 2

以下是我建议的方法：

=IFERROR(SUMPRODUCT(1*($G$2:$G$5>=C2)*($H$2:$H$5<=D2)*$I$2:$I$5),0)+IFERROR(SUMPRODUCT(1*($G$2:$G$5<C2)*($H$2:$H$5>D2)*(D2-C2+1)/($H$2:$H$5-$G$2:$G$5+1)*($I$2:$I$5)),0)+IFERROR(SUMPRODUCT(1*($G$2:$G$5>=C2)*($G$2:$G$5<=D2)*($H$2:$H$5>D2)*(D2-$G$2:$G$5+1)/($H$2:$H$5-$G$2:$G$5+1)*($I$2:$I$5)),0)+IFERROR(SUMPRODUCT(1*($H$2:$H$5<=D2)*($H$2:$H$5>=C2)*($G$2:$G$5<C2)*($H$2:$H$5-C2+1)/($H$2:$H$5-$G$2:$G$5+1)*($I$2:$I$5)),0)

jQuery旨在支持方法链，上面的代码演示了这一点。

请注意，除了使用jQuery构建内容之外，您还应该使用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); }); 调用替换window.onload，您可以将其编写为jQuery.ready。