1

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!
1
  • You're not using regular expressions there (nor do you need to), I've removed the tag and updated the title. Feb 15, 2012 at 10:16

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.