Matching elements whose IDs start with a string without matching just the string

Question

I am trying to use JQuery UI to write a function which takes an id of a row and and hide all the other rows having id's starting with the id passed as an argument to the function. (I am trying something like collapsing child rows if a parent row is clicked).

For e.g.

If the passed id is '1', all the rows having IDs '11', '111', '12', '121', '122', etc should be hidden but not the one with the ID as just '1'

If the passed id is '2', all the rows having IDs '21', '211', '22', '221', '222', etc should be hidden but not the one with the ID as just '2'

Currently I am trying something like this:

$(function() { // run the currently selected effect function runEffect(divId) { // set effect type var selectedEffect = "blind"; // most effect types need no options passed by default var options = {}; // run the effect $('tr[id^=%s]'.replace('%s',divId)).hide( selectedEffect, options, 1000, callback ); }; // callback function function callback() { }; // set effect from select menu value $( "tr" ).click(function() { var divId = this.getAttribute('id'); runEffect(divId); return false; }); });

This works fine with just one problem. It also hides the row with the id that was passed. So if I click on row having ID as '1', it hides all rows with ID as 1 and those starting with 1. I just want to hide all other rows starting with ID 1 but not the one with id as just '1'.

Please help!

You're not using regular expressions there (nor do you need to), I've removed the tag and updated the title. — T.J. Crowder
– T.J. Crowder, Commented Feb 15, 2012 at 10:16

T.J. Crowder · Accepted Answer · 2012-02-15 10:10:52Z

You can throw a .not in there to do that:

$('tr[id^=%s]'.replace('%s',divId)).not('#' + divId).hide...

Side note 1: I don't think I'd use replace there, and in general you should surround the attribute value with quotes (although with the ID values you've shown, you're okay without quotes as they don't have spaces; it's just a good idea in general). E.g.:

$('tr[id^="' + divId + '"]'.not('#' + divId).hide...

Side note 2: id values starting with digits are not valid in CSS; they can't start with a digit. They're also invalid in HTML prior to HTML5, which broadened the range of allowed values. Since jQuery uses CSS-style selectors, when using jQuery I tend to stick to the most restrictive form of ID values (CSS's). FWIW.

Collectives™ on Stack Overflow

Matching elements whose IDs start with a string without matching just the string

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related