【问题标题】:jquery find returning only one element (in Meteor)jquery find 只返回一个元素(在 Meteor 中)
【发布时间】:2013-04-09 01:41:43
【问题描述】:

我有以下链接,点击时应该显示花式框——在这里使用 jquery 插件: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>

我遇到的问题是fancybox 仅适用于第一个链接。 在 Meteor 中,我有:

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');
                    })
                })
            }
        });

}

当我点击第一个链接时,fancybox 会按预期加载,但是当我点击第二个链接时,没有任何反应。

通过console.log,它也清楚地发现find 只返回第一个元素......因此出现了问题。

请注意,如果我只使用 ('a.popup-link') 而不使用 find,它将不起作用。

发生了什么事?谢谢!

【问题讨论】:

    标签: javascript jquery meteor


    【解决方案1】:

    如果您尝试使用 Meteor 模板方法(而不是 jQuery find() 方法),请使用 this.findAll('a.popup-link') 而不是 this.find('a.popup-link')

    但是,findAll() 返回一个 DOM 元素数组,我不确定 $() 是否会接受它作为参数。如果没有,您可以循环遍历数组的元素。

    【讨论】:

    • 感谢 findAll 在 $() 内为我工作。我不确定 findAll 是什么,因为我认为我正在调用 jquery“find”方法
    【解决方案2】:

    我认为您使用的是不同的find 方法。使用:

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

    我不确定this.find('a.popup-link') 是如何工作的,但我想这取决于thisfind 是/做了什么。要使用 jQuery 方法find,您需要一个 jQuery 对象。这就是$(this) 所做的。从那里,您可以找到带有find 的“a.popup-link”后代。

    【讨论】:

    • @SetSailMedia 好吧,我不确定我是否会称之为损坏。它显然在工作(console.log 和选择器部分中的相同 jQuery 代码)。但这一切都取决于this 是什么。据我们所知,它是window(或一个对象),并且可能定义了一个find 方法。
    • 我认为“this”在这种情况下指的是流星物体,而“find”指的是流星特定的东西......因此奇怪的行为。感谢您的回复!
    • @algorithmicCoder 啊,好吧,以前从未使用过流星,只是注意到了奇怪的语法。
    猜你喜欢
    • 1970-01-01
    • 2021-11-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多