7

给定这个例子：

<img class="a" />
<img />
<img class="a" />
<img class="a" id="active" />
<img class="a" />
<img class="a" />
<img />
<img class="a" />

（我刚刚使用了 img 标签作为示例，这不是我的代码中的内容）

使用 jQuery，您将如何选择与 #active 相邻的类为“a”的 img 标签（在本例中为中间四个）？

您可以通过遍历所有以下和前面的元素来相当容易地做到这一点，当过滤条件失败时停止，但我想知道 jQuery 是否可以原生？

4

6 回答 6

4

这就是我最后想出的。

// here's our active element.
var $active = $('#active');

// here is the filter we'll be testing against.
var filter = "img.a";

// $all will be the final jQuery object with all the consecutively matched elements.
// start it out by populating it with the current object.
var $all = $active;

for ($curr = $active.prev(filter); $curr.length > 0; $curr = $curr.prev(filter)) {
    $all = $all.add($curr);
}
for ($curr = $td.next(filter); $curr.length > 0; $curr = $curr.next(filter)) {
    $all = $all.add($curr);
}

对于后续问题，我可以看到如何通过将其变成一个带有两个参数的函数来轻松概括它：一个初始元素和一个过滤器字符串 - 任何人都可以指出正确的方向以找出如何扩展jQuery对象添加这样的功能？

编辑：从那以后，我发现 each() 函数在某些方面会做得很好。在我自己的情况下，它并没有那么干净，因为我想要所有这些元素的单个 jQuery 对象，但这里是你如何将每个对象用于不同的目的（在这个例子中隐藏连续的“.a”元素：）

$('#active')
    .nextAll()
    .each(hideConsecutive)
    .end()
    .prevAll()
    .each(hideConsecutive)
;
function hideConsecutive(index, element) {
    var $e = $(element);
    if (!$e.is(".a")) {
        return false;    // this stops the each function.
    } else {
        $e.hide('slow');
    }
}

--

编辑：我现在把它放在一个插件中。如果您有兴趣，请查看http://plugins.jquery.com/project/Adjacent 。

于 2008-09-17T05:30:03.387 回答
2

我相信循环是你最好的选择。但是您可以尝试，每个活动，然后前后移动，直到条件中断，如果集合足够大，这会更快。

于 2008-09-17T02:55:32.853 回答
1

下面的代码将添加两个新函数，nextConsecutive() 和 prevConsecutive()。他们应该做你想做的事。

$.each( ['prev', 'next'], function(unusedIndex, name) { $.fn[ name + 'Consecutive' ] = function(matchExpr) {

    var $all = 
        (name == 'prev')
             ? $(this).prevAll()
             : $(this).nextAll();
    if (!matchExpr)
        return $all;

    var $notMatch = $($all).not(matchExpr).filter(':first');
    if ($all.index($notMatch) != -1)
        return $allConsecutive = $all.slice(0, $all.index($notMatch));

    return $all;
};

});

于 2009-04-18T14:07:15.703 回答
0

波浪号 (~) 是兄弟选择器：

$('#active ~ img.a').hide();
于 2008-09-17T03:48:26.547 回答
0

@Prestaul

$('#active ~ img.a')

只会选择以下兄弟姐妹，并且也会包括不连续的兄弟姐妹。文档：http ://docs.jquery.com/Selectors/siblings#prevsiblings

于 2008-09-17T04:04:13.013 回答
0

这是另一种方法，尽管兄弟选择器的答案非常酷：

var next = $('#active').next('.a');
var prev = $('#active').prev('.a');

编辑：我重新阅读了您的要求，这并不是您想要的。您可以使用 nextAll 和 prevAll，但它们也不会在没有类名的 IMG 处停止。

于 2008-09-17T04:26:46.003 回答