Reputation: 16157
I am pretty new to jQuery and I am trying to find the most practical way to solve my problem. Currently what I have works, however I know I could simplify it and make it more practical. I am just not sure how to.
So here is my jQuery ...
var hl1 = data.headlines[0,0].headline;
var hl2 = data.headlines[0,1].headline;
var hl3 = data.headlines[0,2].headline;
var hl4 = data.headlines[0,3].headline;
var hl5 = data.headlines[0,4].headline;
var hl6 = data.headlines[0,5].headline;
var hl7 = data.headlines[0,6].headline;
var hl8 = data.headlines[0,7].headline;
var hl9 = data.headlines[0,8].headline;
var hl10 = data.headlines[0,9].headline;
$('#headlines .title').eq(0).append(hl1);
$('#headlines .title').eq(1).append(hl2);
$('#headlines .title').eq(2).append(hl3);
$('#headlines .title').eq(3).append(hl4);
$('#headlines .title').eq(4).append(hl5);
$('#headlines .title').eq(5).append(hl6);
$('#headlines .title').eq(6).append(hl7);
$('#headlines .title').eq(7).append(hl8);
$('#headlines .title').eq(8).append(hl9);
$('#headlines .title').eq(9).append(hl10);
And here is my HTML...
<div id="headlines">
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
<h2 class="title"></h2>
</div>
So basically what I am doing is pulling some data via AJAX/JSON and appending it into these h2 tags. This works the way I want to however I feel like this could be compressed into one function, but I am not really sure how to get there. Any examples or descriptive help would be very much appreciated. Thanks..
Upvotes: 0
Views: 90
Reputation: 70169
With the good ol' fashioned for
loop:
var titles = $('#headlines .title');
for (var i=0; i<titles.length; i++)
titles.eq(i).append(data.headlines[0,i].headline);
Explained:
for
is the most basic form of Javascript iteration.
First I'm caching the $('#headlines .title')
jQuery selector in the titles
var, this way I can access all of the matched elements by the $('#headlines .title')
selector without having to create a new jQuery object for each iteration, which provides a good performance boost.
Next, I iterate through all matched elements, that is, from index 0 (first element) until the last element (that is, titles.length-1
, as index is 0-based). The i<titles.length
part would be the same as i<=titles.length-1
as I'm using integers, so I chose the one which looks more tidier and has better performance.
Note that the jQuery objects' .length
property returns the same value as the .size()
method, but .length
is preferred because it does not have the overhead of a function call, as per documentation.
The rest of this part is self-explanatory, the .eq()
method filters the titles
selector returning only the item with the index which I'm iterating at the moment, this way I can append the data.headlines
with the very same index to it with the data.headlines[0,i].headline
.
Or with jQuery .each
iteration:
$('#headlines .title').each(function(i) {
$(this).append(data.headlines[0,i].headline);
}
The .each
jQuery method is very self-explanatory as well, taken from the jQuery API site:
Description: Iterate over a jQuery object, executing a function for each matched element.
So I create a set of DOM elements with the $('#headlines .title')
and iterate through them with the .each
. The function passed as parameter will be executed for each element matched by the selector, so, I create a jQuery object with the current element in the iteration - $(this)
- and append the corresponding headline index to it. .each
's index is 0-based, as well as virtually all indexed array(-like) structures in JS.
Upvotes: 3