Question

简短形式：

您将如何在jQuery中实现类似以下的内容？

详细信息：

我有一对包装HTML元素的纯JavaScript函数；它满足了我的需求：

> wrap_element('li', 1)
'<li>1</li>'
> wrap_row('ul', 'li', [1, 2, 3])
'<ul><li>1</li><li>2</li><li>3</li></ul>'

但是，作为jQuery的新手，我敢肯定，有一种更优雅，更惯用的方法来使用jQuery做等效的事情。你能启发我吗？

作为参考，这是我的纯JavaScript实现：

function wrap_element(tag, el) {
  return '<' + tag + '>' + el + '</' + tag + '>';
};
function wrap_row(row_tag, col_tag, cols) {
  var wrapped_cols = cols.map(function(col) {
    return wrap_element(col_tag, col)});
  var row = wrapped_cols.reduce(function(col, accum) {
    return col + accum; });
  return wrap_element(row_tag, row);
};

Answer 1

这在很大程度上取决于您要将内容视为文本还是 HTML 。您当前的代码将内容视为HTML。

如果要将内容视为HTML，则可以将结构构建为HTML，然后单击一次解析器。在ES2015 +中：

function wrap_row(row_tag, col_tag, cols) {
    return $(
        `<${row_tag}>
            ${cols.map(html => `<${col_tag}>${html}</${col_tag}>`).join("")}
         </${row_tag}>`
    );
}

改为发送文字：

要使用给定的文本创建单个元素（包装在jQuery对象中），jQuery的方式应为：

$("<td>").text("text");

如果愿意，可以将其包装在函数中。

要执行wrap_row，可能需要遵循以下步骤：

function wrap_row(row_tag, col_tag, cols) {
    var row = $("<" + row_tag + ">"); // Or `var row = $(document.createElement(row_tag))`
    var col = $("<" + col_tag + ">"); // Or see above
    return row.append(cols.map(function(text) {
        return col.clone().text(text);
    }));
}

或与ES2015 +：

function wrap_row(row_tag, col_tag, cols) {
    const row = $("<" + row_tag + ">"); // Or `var row = $(document.createElement(row_tag))`
    const col = $("<" + col_tag + ">"); // Or see above
    return row.append(cols.map(text => col.clone().text(text));
}

从技术上讲，它确实创建并丢弃了它从未使用过的DOM元素。因此，也许是这样（坚持使用ES2015，如果需要，可以轻松转换为ES5）：

function wrap_row(row_tag, col_tag, cols) {
    const row = $("<" + row_tag + ">"); // Or `var row = $(document.createElement(row_tag))`
    col_tag = "<" + col_tag + ">";
    return row.append(cols.map(text => $(col_tag).text(text));
}

也就是说，如果您要使用很多是核心内容，则可以考虑使用DOM：

function wrap_row(row_tag, col_tag, cols) {
    const row = $(document.createElement(row_tag));
    return row.append(cols.map(text => {
        const el = document.createElement(col_tag);
        el.appendChild(document.createTextNode(text));
        return el;
    });
}

Answer 2

不确定JQuery是否是正确的解决方案，但是您可以简单地使用来自wrap_row调用的结果字符串来创建新元素（片段）并对此进行处理。在代码段中，将一行添加到现有表。

const wrap_element = (tag, el) => `<${tag}>${el}</${tag}>`;
const wrap_row = (row_tag, col_tag, cols) => 
 `<${row_tag}>${cols
     .map( col => wrap_element(col_tag, col) ).join("")}</${row_tag}>`
;

const row = $(wrap_row('tr', 'td', [1,2,3]));

$('table').append(row);

console.log(`${row.html()} appended`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <tr><th>zero</th><th>one</th><th>two</th></tr>
</table>

用jQuery包装元素（和元素数组）

简短形式：

详细信息：

2 个答案: