CODEWITHSUNDEEP
javascriptjqueryhtml
caustic
caustic

Reputation: 585

How to put elements into another (jQuery)?

Here is the markup I have on the page, quite literally:

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"

And this is what I need from the markup above:

<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>

As you can see, the number of rows I need to make (anchors links) depends on how many of the same data-attribute there are in the original markup. E.g.

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"

would produce

<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>

whereas

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

would produce

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

I'm kinda stumped as to how to approach this, could anyone show me an example code that would work for this? I have tried .wrap and .append but with no luck, I can't seem to accomplish the rows I need.

Upvotes: 1

Views: 56

Answers (1)

Rooster
Rooster

Reputation: 10077

I dont think your approach is a great idea, but sometimes hacks are necessary. One approach you could take for this is running a regex against it.

Something like this fiddle should work.

You'll probably need to modify it for your specific usecase, but this should be enough to get you started :)

Here the code. Basically we regex for the 3 patterns and then draw as many links as the minimum pattern array length. (the match returns and array of matches or null when no matches. you'll probably want to add some error checking as well.)

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

Upvotes: 1

Related Questions