You're getting one random element for every child. You need to operate
on the current jQuery object, not on each element.
jQuery.fn.randomChild = function(settings) {
var random = Math.floor(Math.random() *
this.children().length);
return this.children(':not(:nth-child('+random+'))').hide(); //
parenthesis mess, not sure this selector will work
// or this.children().hide().eq(random).show();
};
- ricardo
On Oct 15, 5:54 pm, illtron <[EMAIL PROTECTED]> wrote:
> I've made no progress on this. I only seem to be able to break it in
> different ways every time I make a change that seems right. Can
> anybody lend a hand?
>
> On Oct 9, 4:17 pm, illtron <[EMAIL PROTECTED]> wrote:
>
> > Hi, I posted this a few weeks ago but I didn't get any traction. I've
> > been fumbling with it on and off since then, but I'm not getting
> > anywhere. I figured it couldn't hurt to try again.
>
> > I think I'm pretty close to getting this to work, but it's not quite
> > there. This is essentially tab functionality, but the initially
> > showing div
> > needs to be randomly chosen. I can either show the random div
> > initially, but then the links don't work. Alternatively, I can make
> > the links work, but then I can't get the random div.
>
> > The code I'm including shows working links. To (attempt to) show the
> > random div, I'm using
> > thishttp://www.leftrightdesigns.com/library/jquery/randomchild/
>
> > The links use this:http://enure.net/dev/hide-all-except-one/
>
> > I was trying to take this part, which shows the first child div of
> > #toggleThis: $('#toggleThis > div:first').attr('id')
>
> > And substitute this: $('#toggleThis').randomChild() but it doesn't
> > work.
>
> > Can anybody weigh in and tell me where I'm going wrong? Thanks!
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> > <title>Random test</title>
> > <style type="text/css">.hide { display: none; }</style>
> > <script type="text/javascript" src="http://code.jquery.com/jquery-
> > latest.min.js"></script>
> > <script type="text/javascript">
> > $(document).ready(function() {
> > var hash = window.location.hash;
> > (!hash) ?
> > hideAllExcept('#' + $('#toggleThis > div:first').attr('id'))
> > : hideAllExcept(window.location.hash);
> > $('a.toggle').click(function() {
> > var href = $(this).attr('href');
> > hideAllExcept(href);
> > });
>
> > });
>
> > function hideAllExcept(el) {
> > $('#toggleThis div').addClass('hide');
> > $(el).removeClass('hide');
> > $('a.toggle').removeClass('active');
> > $('a[href="' + el + '"]').addClass('active');
>
> > }
>
> > jQuery.fn.randomChild = function(settings) {
> > return this.each(function(){
> > var c = $(this).children().length;
> > var r = Math.ceil(Math.random() * c);
> > $(this).children().hide().parent().children(':nth-
> > child(' + r + ')').show();
> > });
>
> > };
>
> > </script>
> > </head>
> > <body>
> > <ul>
> > <li><a href="#lorem" class="toggle">Lorem ipsum</a></
> > li>
> > <li><a href="#ut" class="toggle">Ut enim ad</a></li>
> > <li><a href="#duis" class="toggle">Duis aute</a></li>
> > <li><a href="#execepteur" class="toggle">Excepteur
> > sint</a></li>
> > </ul>
> > <div id="toggleThis">
> > <div id="lorem">Lorem ipsum dolor sit amet.</div>
> > <div id="ut">Ut enim ad minim veniam.</div>
> > <div id="duis">Duis aute irure dolor.</div>
> > <div id="execepteur">Excepteur sint occaecat.</div>
> > </div>
> > </body>
> > </html>
