Wikipedia App - wrapping search results in an element

Wikipedia App - wrapping search results in an element
0

#1

Hi,

Having trouble separating out search results into individual wrapped article elements. Below is what is generated when I click the search button.

<section id = "results">
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</section>

But what I want to generate is the following

<section id = "results">
	<article>
		<h2></h2>
		<p></p>
	<article/>
	<article>
		<h2></h2>
		<p></p>
	<article/>
	<article>
		<h2></h2>
		<p></p>
	<article/>
	<article>
		<h2></h2>
		<p></p>
	<article/>
	<article>
		<h2></h2>
		<p></p>
	<article/>
</section>

I can get this using wrapInner() in the for loop, but this also creates a load of unwanted article containers on the outside. Is there a cleaner way to do this to get the result above? Or is there a better way entirely to approach this problem?

https://codepen.io/KUBIX90/pen/ooaWaV

Thanks for your help


#2

Hi, i’m a newbie but i think that if you change your line

$("#results").append("<h2>" + data[1][i],"<p>" + data[2][i]);

for

$("#results").append("<article class='wikiart'>"+"<h2>"+ data[1][i] +  "</h2>" + "<p>" + data[2][i] + "</p>" + "</article>");

Where “wikiart” is the class to handle of yours articles.
It works like you need.

I don’t know JQuery or Ajax or whatever you are using here but it seems that the append function when you use the comma, it autocloses the opened tags.
~Greetings


#3

Thanks for this, seems to work fine. Learned something new with using the + sign instead of a comma, thanks alot!