javascript - Any shorter way to add attributes to specified elements using jQuery? - Stack Overflow

admin管理员组

文章数量:1025457

Assuming I have a wide table with many columns, and I want to add colspan=2 to:

td#2, td#10, td#15

td#3, td#11, td#16

Do I have to do it specifically:

$("table td").eq(2).attr('colspan','2')
$("table td").eq(10).attr('colspan','2')
$("table td").eq(15).attr('colspan','2')

Or should I use filter()?

Is there any shorter way?

Assuming I have a wide table with many columns, and I want to add colspan=2 to:

td#2, td#10, td#15

td#3, td#11, td#16

Do I have to do it specifically:

$("table td").eq(2).attr('colspan','2')
$("table td").eq(10).attr('colspan','2')
$("table td").eq(15).attr('colspan','2')

Or should I use filter()?

Is there any shorter way?

• javascript
• jquery

Share Improve this question Follow edited Jan 27, 2013 at 19:02 Frédéric Hamidi 263k4242 gold badges496496 silver badges485485 bronze badges asked Jan 27, 2013 at 16:08 Royi NamirRoyi Namir 149k144144 gold badges494494 silver badges831831 bronze badges 5

• You're missing some ' quotes on the second parameter, typo? – Rory McCrossan Commented Jan 27, 2013 at 16:10
• Note that index is zero based so the second td is eq(1), the tenth is eq(9) and so on. – Rory McCrossan Commented Jan 27, 2013 at 16:13
• 2 6 answers, 5 10k+ reputation users, 13 upvotes and 31 views. Still no one can edit the title – Alexander Commented Jan 27, 2013 at 16:31
• @Alex, title edits are usually minor (and I guess we were more focused on answering the question :) Your point still stands, but you could have considered the rest of the question in your previous edit. See this post from our fearless co-founder for the rationale behind this. – Frédéric Hamidi Commented Jan 27, 2013 at 19:04
• @FrédéricHamidi, I beg to disagree about title edits being minor ones – Alexander Commented Jan 27, 2013 at 19:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You can do:

$("td:eq(2), td:eq(10), td:eq(15)", "table").prop('colspan',2);

is i think the shortest possible way.

You could do

$('table').find('td:eq(2), td:eq(10), td:eq(15)').prop('colspan', 2);

(I'd use .prop() instead of .attr() I think, but I need to make sure :-) (edit yup it's a real property)

Note that the above would work, but those jQuery extended search qualifiers like :eq() can slow down the selection process. It might be faster to use a separate filter step after selecting just the cells.

Also note that that selection (like your original code) finds the 2nd, 10th, and 15th cells in the whole table. If you wanted to set the property of the 2nd, 10th, and 15th cells on each row, you'd probably want something different.

$("table td").filter(':eq(2), :eq(10), :eq(15)').attr('colspan',2);

As an alternative to multiple selectors, you can invoke the form of attr() that takes a function and write:

$("table td").attr("colspan", function(index) {
    return index == 2 || index == 10 || index == 15 ? "2" : undefined;
});

(You can use prop() equally well here, since its setter form also supports taking a function and the colspan attribute directly maps to the DOM property of the same name.)

You can optimise your code as below. Rather than jumping into DOM and searching $("table td") 3 times cache the it into a variable and use it.

var td = $("table td");

td.eq(2).attr('colspan',2);
td.eq(10).attr('colspan',2);
td.eq(15).attr('colspan',2);

Else you can do something like

$("td:eq(2), td:eq(10), td:eq(15)", "table").attr('colspan',2);

Else

$("table").filter('td:eq(2), td:eq(10), td:eq(15)').attr('colspan',2);

Assuming I have a wide table with many columns, and I want to add colspan=2 to:

td#2, td#10, td#15

td#3, td#11, td#16

Do I have to do it specifically:

$("table td").eq(2).attr('colspan','2')
$("table td").eq(10).attr('colspan','2')
$("table td").eq(15).attr('colspan','2')

Or should I use filter()?

Is there any shorter way?

Assuming I have a wide table with many columns, and I want to add colspan=2 to:

td#2, td#10, td#15

td#3, td#11, td#16

Do I have to do it specifically:

$("table td").eq(2).attr('colspan','2')
$("table td").eq(10).attr('colspan','2')
$("table td").eq(15).attr('colspan','2')

Or should I use filter()?

Is there any shorter way?

• javascript
• jquery

Share Improve this question Follow edited Jan 27, 2013 at 19:02 Frédéric Hamidi 263k4242 gold badges496496 silver badges485485 bronze badges asked Jan 27, 2013 at 16:08 Royi NamirRoyi Namir 149k144144 gold badges494494 silver badges831831 bronze badges 5

• You're missing some ' quotes on the second parameter, typo? – Rory McCrossan Commented Jan 27, 2013 at 16:10
• Note that index is zero based so the second td is eq(1), the tenth is eq(9) and so on. – Rory McCrossan Commented Jan 27, 2013 at 16:13
• 2 6 answers, 5 10k+ reputation users, 13 upvotes and 31 views. Still no one can edit the title – Alexander Commented Jan 27, 2013 at 16:31
• @Alex, title edits are usually minor (and I guess we were more focused on answering the question :) Your point still stands, but you could have considered the rest of the question in your previous edit. See this post from our fearless co-founder for the rationale behind this. – Frédéric Hamidi Commented Jan 27, 2013 at 19:04
• @FrédéricHamidi, I beg to disagree about title edits being minor ones – Alexander Commented Jan 27, 2013 at 19:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You can do:

$("td:eq(2), td:eq(10), td:eq(15)", "table").prop('colspan',2);

is i think the shortest possible way.

You could do

$('table').find('td:eq(2), td:eq(10), td:eq(15)').prop('colspan', 2);

(I'd use .prop() instead of .attr() I think, but I need to make sure :-) (edit yup it's a real property)

Note that the above would work, but those jQuery extended search qualifiers like :eq() can slow down the selection process. It might be faster to use a separate filter step after selecting just the cells.

Also note that that selection (like your original code) finds the 2nd, 10th, and 15th cells in the whole table. If you wanted to set the property of the 2nd, 10th, and 15th cells on each row, you'd probably want something different.

$("table td").filter(':eq(2), :eq(10), :eq(15)').attr('colspan',2);

As an alternative to multiple selectors, you can invoke the form of attr() that takes a function and write:

$("table td").attr("colspan", function(index) {
    return index == 2 || index == 10 || index == 15 ? "2" : undefined;
});

(You can use prop() equally well here, since its setter form also supports taking a function and the colspan attribute directly maps to the DOM property of the same name.)

You can optimise your code as below. Rather than jumping into DOM and searching $("table td") 3 times cache the it into a variable and use it.

var td = $("table td");

td.eq(2).attr('colspan',2);
td.eq(10).attr('colspan',2);
td.eq(15).attr('colspan',2);

Else you can do something like

$("td:eq(2), td:eq(10), td:eq(15)", "table").attr('colspan',2);

Else

$("table").filter('td:eq(2), td:eq(10), td:eq(15)').attr('colspan',2);

本文标签： javascriptAny shorter way to add attributes to specified elements using jQueryStack Overflow