如何使用jquery查找具有相同类名的元素

时间:2012-02-14 14:00:15

标签: javascript jquery html jquery-plugins xhtml

我有一个容器,里面有几个锚标签。这些锚标签具有相同的类名。现在我想获得所有带有类名的锚标签,让我们说在容器内的clickMe。并仅为他们应用插件。

这是我所拥有的

<div class="container">
    <a href="#" class="button" rel="btn1">Task box 1</a><br />
    <a href="#" class="button" rel="btn2">Task box 2</a><br />
    <a href="#" class="button" rel="btn3">Task box 3</a><br />
    <a href="#" class="button" rel="btn4">Task box 4</a><br />
    </div>

修改

这是我的插件代码

(function() {
$.fn.tasks = function(userOptions){
    this.each(function() {
        var opts = $.extend({
            'speed'     : 200
        }, userOptions);

        var ael = $(this).find('a.button');
        var container = $(this); //'.' + opts.container;
        var speed = opts.speed;
        //alert(container);
        var backdrop = $('<div></div>').addClass('backdrop');
        var box = $('<div></div>').addClass('box');

        $(ael).click(function() {
            //alert(speed);
            var rel = $(this).attr(rel);
            alert("rel");
            $(box).html(rel);
            $(container).append(backdrop, box);
            $(backdrop).animate({'opacity' : '.50'}, speed, 'linear');
            $(box).animate({'right' : '0'}, speed, 'linear');
            $(backdrop,box).css('display', 'block');
        });

        $(backdrop).click(function() {
            closeBox();
        });

        function closeBox() {
            $(box).animate({'right' : '-500'}, speed, 'linear', function() {
                $(backdrop).animate({'opacity' : '.0'}, speed, 'linear', function() {
                    $(backdrop,box).css('display', 'none');
                });
            });
        }
    });
}
}(jQuery))

2 个答案:

答案 0 :(得分:2)

假设我已正确理解你的问题,就像这样简单:

$(".container a.clickMe").yourPlugin();

.container - 查找类“容器”的元素

a.clickMe - 查找.containera元素的后代,其中包含“clickMe”类

你应该通过阅读jQuery documentation开始(正如你的问题评论中提到的那样),因为这几乎是基本的。

修改(见评论)

在您的插件中,this很可能会引用匹配元素集。因此,您可以使用this迭代each,并使用find获取后代a元素:

this.each(function() {
    var aElems = $(this).find("a.clickMe");
});

答案 1 :(得分:0)

要仅选择容器内带有“clickMe”类的锚点,请使用:$("div.container a.clickMe")