javascript - How can I simplify this jquery? - Stack Overflow

admin管理员组

文章数量:1332332

I have the following jquery which I want to simplify.

I am just repeating the same things.

Could anyone give me suggestions please.

Thanks in advance.

$("a[rel='imagebox-all']").colorbox({slideshow:true});
$("a[rel='imagebox-new']").colorbox({slideshow:true});
$("a[rel='imagebox-even']").colorbox({slideshow:true});
$("a[rel='imagebox-amina']").colorbox({slideshow:true});
$("a[rel='imagebox-cumulus']").colorbox({slideshow:true});
$("a[rel='imagebox-wee']").colorbox({slideshow:true});
$("a[rel='imagebox-four']").colorbox({slideshow:true});
$("a[rel='imagebox-teen']").colorbox({slideshow:true});

I have the following jquery which I want to simplify.

I am just repeating the same things.

Could anyone give me suggestions please.

Thanks in advance.

$("a[rel='imagebox-all']").colorbox({slideshow:true});
$("a[rel='imagebox-new']").colorbox({slideshow:true});
$("a[rel='imagebox-even']").colorbox({slideshow:true});
$("a[rel='imagebox-amina']").colorbox({slideshow:true});
$("a[rel='imagebox-cumulus']").colorbox({slideshow:true});
$("a[rel='imagebox-wee']").colorbox({slideshow:true});
$("a[rel='imagebox-four']").colorbox({slideshow:true});
$("a[rel='imagebox-teen']").colorbox({slideshow:true});

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow edited Mar 23, 2010 at 6:03 rahul 187k5050 gold badges238238 silver badges264264 bronze badges asked Dec 3, 2009 at 7:05 shinshin 32.7k7171 gold badges192192 silver badges272272 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 12

Assuming there are no other values of imagebox-* you want to exclude:

$("a[rel^='imagebox-']").colorbox({slideshow:true});

That being said, attribute selectors are usually best avoided and you're typically better off restructuring your problem to allow a better solution. Like you could use classes:

<a href="..." class="imagebox teen"> ...

Note the space: that's two classes assigned. So you can do:

$("a.imagebox")...

for all of them. Or:

$("a.imagebox.teen")...

for just one of them.

Remember as well you can add multiple selectors with a ma:

$("a.class1, a.class2")...

will apply what you're doing to anchors with class1 OR class2 versus:

$("a.class1.class2")...

which applies whatever you're doing to anchors that have class1 AND class2.

You can user the attributeStartsWith selector which matches elements that have the specified attribute and it starts with a certain value.

$("a[rel^='imagebox-']").colorbox({slideshow:true});

Could you use

$("a[rel^='imagebox']").colorbox({slideshow:true});

which applies to any a tag with a rel attribute that starts with imagebox?

Remember to have it structured at least, like this.

$("a[rel='imagebox-all']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-new']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-even']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-amina']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-cumulus']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-wee']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-four']")
.colorbox({
slideshow: !0
}), $("a[rel='imagebox-teen']")
.colorbox({
slideshow: !0
})

Try this:

var selectors = [
    "a[rel='imagebox-all']",
    "a[rel='imagebox-new']",
    "a[rel='imagebox-even']",
    // ...
];

$.each(selectors, function(){
    $(this).colorbox({slideshow:true});
});

Then, whenever you need to add a new selector, just add it to the selectors array.

本文标签： javascriptHow can I simplify this jqueryStack Overflow