JQuery randomly display a certain selector

splash

Please help! I'm trying to use JQuery to find selectors within a div and then to display the html of those selectors exactly as is within another div on the page. (To be more precise I'm loading in the html from another page and using a callback function to work with it).

HTML

<div id="load-highlights"> <a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample" /></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a>.</p> <a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample2" /></a> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div>[/CODE] The html will exist like above on the page already but it will be hidden. I want to randomly select either the first a and following p tag or the second a and following p tag and then display them. There will be 5-6 of these a and p groupings at most and this is an example of having just two groupings. I can further put the a and p tags together within individual divs if I have to (but if I can get it to work without having to do that it's slightly better). The farthest I can get actually working is finding out how many direct descendant a tags are in the div load highlights and to create the random number. But then to use that to select the tags and display them within another div somewhere on the page is super stumping me. [CODE]var num = $("#load-highlights > a").length; var rand = (Math.floor(Math.random()*num));[/CODE] Thanks[CODE]<div id="load-highlights">

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a>.</p>

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample2" /></a>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

</div>[/CODE]

The html will exist like above on the page already but it will be hidden. I want to randomly select either the first a and following p tag or the second a and following p tag and then display them. There will be 5-6 of these a and p groupings at most and this is an example of having just two groupings. I can further put the a and p tags together within individual divs if I have to (but if I can get it to work without having to do that it's slightly better).

The farthest I can get actually working is finding out how many direct descendant a tags are in the div load highlights and to create the random number. But then to use that to select the tags and display them within another div somewhere on the page is super stumping me.

var num = $("#load-highlights > a").length; var rand = (Math.floor(Math.random()*num));[/CODE] Thanks[CODE]var num = $("#load-highlights > a").length;
var rand = (Math.floor(Math.random()*num));[/CODE]

Thanks

Seguer

$('#load-highlights > a:eq('+rand+')').css('background', 'red');

Makes the random anchor have a red background.

JacksWastedLife

splash wrote: »

Please help! I'm trying to use JQuery to find selectors within a div and then to display the html of those selectors exactly as is within another div on the page. (To be more precise I'm loading in the html from another page and using a callback function to work with it).

HTML

<div id="load-highlights"> <a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample" /></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a>.</p> <a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample2" /></a> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div>[/CODE] The html will exist like above on the page already but it will be hidden. I want to randomly select either the first a and following p tag or the second a and following p tag and then display them. There will be 5-6 of these a and p groupings at most and this is an example of having just two groupings. I can further put the a and p tags together within individual divs if I have to (but if I can get it to work without having to do that it's slightly better). The farthest I can get actually working is finding out how many direct descendant a tags are in the div load highlights and to create the random number. But then to use that to select the tags and display them within another div somewhere on the page is super stumping me. [CODE]var num = $("#load-highlights > a").length; var rand = (Math.floor(Math.random()*num));[/CODE] Thanks[/QUOTE] [code]var object = $('#load-highlights > a').length; var num[CODE]<div id="load-highlights">

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a>.</p>

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample2" /></a>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

</div>[/CODE]

The html will exist like above on the page already but it will be hidden. I want to randomly select either the first a and following p tag or the second a and following p tag and then display them. There will be 5-6 of these a and p groupings at most and this is an example of having just two groupings. I can further put the a and p tags together within individual divs if I have to (but if I can get it to work without having to do that it's slightly better).

The farthest I can get actually working is finding out how many direct descendant a tags are in the div load highlights and to create the random number. But then to use that to select the tags and display them within another div somewhere on the page is super stumping me.

var num = $("#load-highlights > a").length; var rand = (Math.floor(Math.random()*num));[/CODE] Thanks[/QUOTE] [code]var object = $('#load-highlights > a').length; var num[CODE]var num = $("#load-highlights > a").length;
var rand = (Math.floor(Math.random()*num));[/CODE]

Thanks

var object = $('#load-highlights > a').length; var num[code]var object = $('#load-highlights > a').length;
var num

JacksWastedLife

splash wrote: »

Please help! I'm trying to use JQuery to find selectors within a div and then to display the html of those selectors exactly as is within another div on the page. (To be more precise I'm loading in the html from another page and using a callback function to work with it).

HTML

<div id="load-highlights">

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a>.</p>

<a href="#"><img src="images/highlights/sample.jpg" width="300" height="200" alt="Sample2" /></a>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

</div>[/CODE]

The html will exist like above on the page already but it will be hidden. I want to randomly select either the first a and following p tag or the second a and following p tag and then display them. There will be 5-6 of these a and p groupings at most and this is an example of having just two groupings. I can further put the a and p tags together within individual divs if I have to (but if I can get it to work without having to do that it's slightly better).

The farthest I can get actually working is finding out how many direct descendant a tags are in the div load highlights and to create the random number. But then to use that to select the tags and display them within another div somewhere on the page is super stumping me.

[CODE]var num = $("#load-highlights > a").length;
var rand = (Math.floor(Math.random()*num));[/CODE]

Thanks[/QUOTE]

[code]var object = $('#load-highlights > a');
var num = $("#load-highlights > a").length;
var rand = (Math.floor(Math.random()*num));
// the jQuery object stores all of the selected elements as in an array so you can refer to one that way so object[rand] would refer to the selected item at index rand
$(object[rand]).clone().appendTo('otherDiv');

splash

Daaaayum so complex yet so simple. You're a life saver. I can finally move on with so many things on the website if this works.

Seguer.. Hmmmm... I'll take that into consideration.

splash

It looks like I just have to fix it so that object[rand] returns something random, except above zero. If it's zero then it tries to display all the objects in the new div.

Danke

Seguer

My line of code is what comes after your original lines, where you've already got a random number in the range of elements (assuming your code works, didn't test it).

Logically:

Count objects
Get random number in object count range
Access object collection at index of random number

The :eq in jQuery will do that unless you already have the objects in an array, at which point you can just do array[index].

Having an index of 0 should get you the first element. Note: when you do .length, you will probably have to -1, as length is the count/total or 1-based, whereas arrays are 0-based.