javascript - 如何将元素放入另一个元素(jQuery)？

Question

这是我在页面上的标记，字面意思是:

data-eng="text"data-eng="text"data-eng="text"data-fr="text"data-fr="text"data-fr="text"data-ger="text"data-ger="text"data-ger="text"

这就是我从上面的标记中需要的:

<a data-eng="text" data-fr="text" data-ger="text"></a>
<a data-eng="text" data-fr="text" data-ger="text"></a>
<a data-eng="text" data-fr="text" data-ger="text"></a>

如您所见，我需要制作的行数( anchor 链接)取决于原始标记中有多少相同的数据属性。例如

data-eng="text"data-eng="text"data-eng="text"data-fr="text"data-fr="text"data-fr="text"data-ger="text"data-ger="text"data-ger="text"

会产生

<a data-eng="text" data-fr="text" data-ger="text"></a>
<a data-eng="text" data-fr="text" data-ger="text"></a>
<a data-eng="text" data-fr="text" data-ger="text"></a>

而

data-eng="text"data-fr="text"data-ger="text"

会产生

<a data-eng="text" data-fr="text" data-ger="text"></a>

我对如何解决这个问题有点困惑，有人可以向我展示一个适用于这个问题的示例代码吗？我尝试过 .wrap 和 .append 但没有运气，我似乎无法完成我需要的行。

Answer 1

我认为你的方法不是一个好主意，但有时黑客是必要的。为此，您可以采取的一种方法是针对它运行正则表达式。

Something like this fiddle should work.

您可能需要针对您的特定用例修改它，但这应该足以让您开始:)

这里是代码。基本上，我们对 3 个模式进行正则表达式，然后绘制与最小模式数组长度一样多的链接。 (匹配返回匹配数组，如果没有匹配则返回 null。您可能还想添加一些错误检查。)

var cmsOut = 'data-eng="text"data-eng="text"data-eng="text"data-fr="text"data-fr="text"data-fr="text"data-ger="text"data-ger="text"data-ger="text"';

var engDetector = cmsOut.match(/data-eng="text"/g);
var frDetector  = cmsOut.match(/data-fr="text"/g);
var gerDetector = cmsOut.match(/data-ger="text"/g);


var htmlOut = '';
for(i=0;i<engDetector.length;i++){
    if(engDetector[i] && frDetector[i] && gerDetector[i]){
        htmlOut += '<a data-eng="text" data-fr="text" data-ger="text">test</a><br>';       
    }
}

document.getElementById('demo').insertAdjacentHTML('afterbegin', htmlOut);