Question

function setParagraph(paraList) {

    $.each(paraList, function (i, field) {

        var pElement = document.createElement('p');
        $(pElement).text(field);

        //a line that combines the p elements like so:
        //<p>First para</p>
        //<p>Second para</p>
    });

    return //all elements for append;
}

我正在尝试编写最少行数的代码，以返回需要附加到以下div的p个元素的“集合”：

$("#somediv").append(setParagraph(jsonValue));

产生：

<div id="somediv">
    <p>First para</p>
    <p>Second para</p>
</div>

方法setParagraph传递给json字符串，该字符串带有字符串项的集合，这些字符串项被转换为方法中的p个元素。

我尝试将元素推入数组，但是我认为这不是正确的方法。另外，我不希望在循环中使用字符串连接来产生期望的结果，除非当然这是处理它的唯一最佳方法。

编辑：

以下内容有效，但正如我所说，我正在寻找除数组以外的其他解决方案：

function setParagraph(paraList) {

    var arrElements = [];

    $.each(paraList, function (i, field) {

        var $pElement = $("<p/>").text(field);

        arrElements.push($pElement);
    });

    return arrElements;
}

var jsonValue = ["First para","Second para"];
$("#somediv").append(setParagraph(jsonValue));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="somediv">
</div>

Answer 1

更短

const par = ["one", "two", "three"]
$("#somediv").html(par.map(p =>  $("<p>", { text: p })))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="somediv"></div>

Answer 2

您可以为此使用$.map(..)，下面是一个示例：

function setParagraph(paraList) {
  return $.map(paraList, function(item) {
    return $("<p>", {
      text: item
    });
  });
}

$("#somediv").append(setParagraph(["one", "two", "three"]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="somediv"></div>

Answer 3

我创建了一个简单的小提琴示例，我认为它可以满足您的需求。至少有一点不同，它的工作方式却有所不同，但是只要稍作改动，您就可以得到想要的结果。

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

这是代码：

// index.js 
const paragraphsCollection = [
  {
    tag: 'p',
    content: 'This is the first parargraph',
  },
  {
    tag: 'p',
    content: 'This is the second paragraph',
  },
];

const setParagraph = (parentElem, contentData) => {
    contentData.forEach(({ tag, content }) => {
          const domElem = document.createElement(tag);
            domElem.innerText = content;

            parentElem.appendChild(domElem);
        });
};

const divElem = document.querySelector('.parentDiv');

setParagraph(divElem, paragraphsCollection);

HTML：

<div class="parentDiv"></div>

合并多个元素并将结果附加到div

3 个答案: