鉴于这个例子:

<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是否可以本机化?

===============>>#1 票数: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

===============>>#2 票数:2

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

===============>>#3 票数: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;
};

});

===============>>#4 票数:0

代字号(〜)是兄弟选择器

$('#active ~ img.a').hide();

===============>>#5 票数:0

@Prestaul

$('#active ~ img.a')

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

===============>>#6 票数:0

这是另一种方法,虽然兄弟选择器的答案非常酷:

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

编辑:我重新阅读您的要求,这不是您想要的。 你可以使用nextAll和prevAll,但是那些也不会在没有类名的情况下停留在IMG上。

  ask by nickf translate from so

未解决问题?本站智能推荐:

2回复

使用jQuery具有匹配的数据过滤器和类名称的过滤器元素

我有一个带有数据过滤器的按钮div。 单击按钮应该将.match类添加到列表中的特定li元素,该类具有与所单击按钮的数据过滤器相同的类名。 单击的按钮也应该仅将.selected应用于他。 这是一个小提琴链接 我很难成功地比较数据过滤器和两个不同元素的类名,并且也只能
3回复

jquery - 根据点击的过滤器选项和容器元素值的匹配值过滤元素

更新2: 非常感谢你们的帮助。 虽然所有三种解决方案都有效,但我在可读性和性能方面都喜欢Bill。 一如既往,我对这里的专业水平和帮助感到惊讶。 真的很感激帮助。 更新: 将演示放在jsfiddle上: http : //jsfiddle.net/FC4QE/17/
2回复

用选择器隐藏父元素 具有过滤器功能(jQuery)

我想隐藏http://ThePirateBay.se上包含少于250个种子的搜索结果 。 我的问题是,我不确定如何使用过滤器选项来检测种子元素,但是在检测到数字范围时也隐藏父元素。 后半部分不起作用。 感谢帮助。 jQuery网页注入器进行自我测试: https : //chro
1回复

JavaScript选择过滤器

背景:有一张桌子,我可以从中选择员工。 我想通过名字来过滤这些员工。(我知道名字不是过滤的好方法,这只是一个例子)基本上我有一个下拉,我选择其中一个过滤器。 我的声明: $scope.filters = null; 。 我也有这个减速选择我的过滤器$scope.chosenFilte
2回复

jQuery过滤器返回选择

我是jquery的初学者。 我只想显示带有类过滤器的表的前5行。 我尝试了下面的声明,但是不起作用。 当使用$('.filter tr').slice(5).hide()他仅显示页面上第一个表的前五个TR。 存档的最佳方法是什么?
1回复

jQuery DataTable列过滤器-选择下拉过滤器

目前,我正在尝试使用一个下拉列表来过滤我的表(我正在使用Datatable插件) 这是我的代码: 我想做的是让我的表有一个下拉过滤器: http : //jquery-datatables-column-filter.googlecode.com/svn/trunk/customF
1回复

平滑过滤器不过滤,仅删除所有元素

我在使用SlickFilter函数时遇到问题,当我按了要过滤的按钮时,它只是删除所有元素,而不是过滤。 我在下面写我的代码。 $('.tecidos-container').slick({ dots: false, arrows: true, slidesPerRow: 2,
1回复

如何将ID添加到jQuery数据表中的列过滤器的类型选择元素

我想将数据绑定到列过滤器的一个下拉列表,为此我需要为下拉列表分配ID或名称...如何实现此目的? 在这里,我使用的是数据表1.9版。
3回复

基于行中文本匹配的jQuery过滤器

我是JQuery的新手。 我有下面的HTML: <div class="search-button"> <label for="filter">Store Name:</label> <select class="filter" dat
1回复

jQuery过滤器功能未显示完全匹配:(

我的问题是这样的, 我正在使用过滤器功能来显示树中的匹配元素(LI),它可以正常工作,但是它显示所有从传递的字符串开始的li元素,例如 如果我将“应用程序”传递给过滤器功能,那么它将显示所有li,该文本从“应用程序”开始