聚合多个 jquery 选择器与共同 parent

Question

我有几个 selector 有一个共同的 parent。有什么好的方法可以将它们放在一个函数调用下吗？例如：

$('td.postbody').children('a[href$=".gif"], a[href$=".jpg"], a[href$=".png"], a[href$=".bmp"]').addClass("zoom2 itag").attr('title','Click to Expand Image.');
$('td.postbody').children('a[href$=".GIF"], a[href$=".JPG"], a[href$=".PNG"], a[href$=".BMP"]').addClass("zoom2 itag").attr('title','Click to Expand Image.');
$('td.postbody').children('a:not([class])').addClass("smlLink");
$('td.postbody').children('img:not([src^="modules/"])').attr("height", "200").addClass("image-link");

我想将它们放在一个通用函数下，例如：

$('td.postbody').children('a','img')).each(function(){...});

我查看了变量的一些用途，但我发现，它看起来并不适用于此。
我的逻辑是一次 select 所有 $('td.postbody').children('*') 然后处理该组，而不是多次扫描文档。 jQuery 这样的逻辑好吗？我的方法应该有所不同吗？谢谢，克里斯

Answer 1

你可以在循环中使用is方法

$('td.postbody').children('a, img').each(function() {
    var el = $(this);
    if (el.is('a[href$=".gif"], a[href$=".jpg"], a[href$=".png"], a[href$=".bmp"]')) {
        // do something
    } else if (el.is('a:not([class])')) {
        // do something
    } else if (el.is('img:not([src^="modules/"])')) {
        // do something
    } 
});

... 因为选择器 [href$=] 区分大小写，您可以通过其他方式检查扩展名：

if (!!this.href && /(?:jpg|gif|png|bmp)$/i.test(this.href)) {
}

Answer 2

我认为单个语句是不够的，但你可以使用一些改进，比如缓存常用的 td.postbody 选择器，并将第一条和第二条语句组合在一起

var $tds = $('td.postbody');
$tds.children('a[href$=".gif"], a[href$=".jpg"], a[href$=".png"], a[href$=".bmp"],a[href$=".GIF"], a[href$=".JPG"], a[href$=".PNG"], a[href$=".BMP"]').addClass("zoom2 itag").attr('title','Click to Expand Image.');
$tds.children('a:not([class])').addClass("smlLink");
$tds.children('img:not([src^="modules/"])').attr("height", "200").addClass("image-link");

聚合多个 jquery 选择器与共同 parent

Aggregate multiple jquery selectors with common parent

jquery

parent-child