jquery find returning only one element (in Meteor)

Question

I have the following links that when clicked on should show fancyboxes--using the jquery plugin here: http://fancyapps.com/fancybox/

<div class="boxes">
    <a href="/signup.html" class="btn popup-link fancybox.ajax">Sign Up</a>
    <a href="/signin.html" class="btn popup-link fancybox.ajax">Sign In</a>
   </div>

The problem i'm having is that the fancybox works only for the first link. In Meteor, I have:

Template.mytemplate.rendered = function () {

        console.log($(this.find('a.popup-link')));
        $(this.find('a.popup-link')).fancybox({
            padding: 18,
            openMethod: 'changeIn',
            closeBtn   : false,
            beforeShow: function() {
                $('input:checkbox').ezMark();
                $('select').selectbox();

                $('.trigger-ajax').on('click', function(e) {
                    e.preventDefault()
                    $('.fancybox-wrap').animate({ 'left': '-100%'}, 400, function() {
                        $(this).parent().find('.popup-link').trigger('click');
                    })
                })
            }
        });

}

When i click on the first link my fancybox loads as expected but when i click on the second nothing happens.

Via the console.log its also clear that the find is returning only the first element ...hence the problem.

Note it doesn't work if i just do ('a.popup-link') without the find .

What's going on? Thanks!

Answer 1

Use this.findAll('a.popup-link') instead of this.find('a.popup-link') if you were trying to use the Meteor template method (not the jQuery find() method).

However, findAll() returns an array of DOM elements that I'm not sure if $() will accept as a parameter. If it doesn't though, you can just loop through the elements of the array.

Answer 2

I think you're using a different find method. Use:

$(this).find('a.popup-link').fancybox({

I'm not sure how this.find('a.popup-link') was ever working, but I guess it depends on what this and find were/did. To use the jQuery method find , you need a jQuery object. That's what $(this) does. From there, you can find "a.popup-link" descendants with find .