jQuery选择带有数字的类。例如foo1,foo2,foo3,foo4

时间:2012-04-21 13:10:44

标签: jquery loops jquery-selectors

我试图在悬停时选择一个div列表(foo#)和fadeIn另一个div(zxcv#)。我在javascript中分配了var,但最终效果只显示在foo6中?

<div class="foo1"><div class="zxcv1"></div></div>
<div class="foo2"><div class="zxcv2"></div></div>
<div class="foo3"><div class="zxcv3"></div></div>
<div class="foo4"><div class="zxcv4"></div></div>
<div class="foo5"><div class="zxcv5"></div></div>
<div class="foo6"><div class="zxcv6"></div></div>

<script type="text/javascript">
        for (var i = 1; i < 6; i++) {
        $(".foo"+i).hover(
                function ()
                {
                    $(".zxcv"+i).fadeIn();
                }, function ()
                {
                    $(".zxcv"+i).fadeOut();
                });
        }
</script>

4 个答案:

答案 0 :(得分:3)

您可以使用“attribute starts with”选择器:

$("div[class^='foo']").hover(function() {
    $(this).find("div[class^='zxcv']").fadeIn();
}, function() {
    $(this).find("div[class^='zxcv']").fadeOut();
});

这消除了对循环的需要,因为大多数jQuery方法都适用于集合中的每个元素。

答案 1 :(得分:2)

您正在关闭回调中的循环变量i,其最终结果是i始终在6内(您可以使用{{1}进行检查}或console.log)。

要解决此问题,您需要确保每个回调都有自己的alert值。由于Javascript变量的范围不是块,而是整个函数,这意味着每次都需要调用当前值为i的函数:

i

几点说明:

  • 循环条件为for (var i = 1; i < 6; i++) { (function(i) { $(".foo"+i).hover( function () { $(".zxcv"+i).fadeIn(); }, function () { $(".zxcv"+i).fadeOut(); }); })(i); } 而不是i < 6 - 这是一个错误吗?
  • 正如其他人已经说过的那样,在这种特殊情况下,你可以完全避免使用不同的选择器来解决闭包问题。

答案 2 :(得分:1)

您可以使用$("[class^='foo']")选择所有内容(另请参阅here):

$("[class^='foo']").hover(
    function () {
        $(this).find("[class^='zxcv']").fadeIn();
    }, function () {
        $(this).find("[class^='zxcv']").fadeOut();
    }
);

另见my example

答案 3 :(得分:0)

尝试使用:nth-​​child()

for (var i = 1; i < 6; i++) {
    $(".foo:nth-child("+i+")").hover(
            function ()
            {
                $(this).fadeIn();
            }, function ()
            {
                $(this).fadeOut();
            });
    }