jQuery regex selector

Question

Here is my code:


<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $('.tree div').click(function(){
            var id = $(this).attr('id');
            $('.tree div:regex(id,^['+id+'_])').html('this one');
        });
    });
</script>

<div class="tree">
    <div id="item_1">
        <a href="<?php echo $this->url(array('action' => 'ketab')); ?>"><?php echo $this->translate("Add Ketab"); ?></a>
    </div>
    <div id="item_1_1">
        <span></span>
        <a href="<?php echo $this->url(array('action' => 'ketab')); ?>"><?php echo $this->translate("Add Ketab"); ?></a>
    </div>
    <div id="item_1_2">
        <span></span>
        <a href="<?php echo $this->url(array('action' => 'ketab')); ?>"><?php echo $this->translate("Add Ketab"); ?></a>
    </div>
</div>

I want hide item_1_1 and item_1_2 when i click on item_1, I don't know how can i do that with regex.

I use http://james.padolsey.com/javascript/regex-selector-for-jquery/ for regx

Interesting hack to post the HTML ;-) You don't actually need to escape all your HTML and use <pre><code> tags though. Just paste your original HTML and press the {} code button. For newlines, rather than using <br/>, just press enter twice. — David Tang
– David Tang, Commented Feb 17, 2011 at 12:38

David Tang · Accepted Answer · 2011-02-17 12:30:19Z

4

No need for the regex selector here. Use jQuery's built-in attribute-starts-with selector:

$('#item_1').click(function () {
    $('[id^="item_1"]').hide();
});

If you just want to use that plugin anyway, then your selector would be:

':regex(id, ^item_1)'

answered Feb 17, 2011 at 12:30

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

White Elephant Over a year ago

Good advice there. The jQuery starts with selector would be a much quicker method than using the :regex selector plugin, which is very slow.

Mohammad Ali Akbari Over a year ago

how about when I have children for item_1_2 ?

David Tang Over a year ago

@Mohammad the children will get hidden as well.

Gowri · Accepted Answer · 2011-02-17 13:20:53Z

0

no need regex

 <script type="text/javascript">
    $(document).ready(function() {

    $('.tree div').click(function(){

    $('.tree div').hide();
    $(this).show()

    });

    });
    </script>

answered Feb 17, 2011 at 13:20

Gowri

16.9k27 gold badges103 silver badges162 bronze badges

Comments

lsuarez · Accepted Answer · 2011-02-18 19:36:59Z

You could do it with your naming schema or you could just simply...

$("div > div a").click(function() {
    $(this).parent().siblings("div").hide();
});

Hide the div siblings of the clicked link within the div, especially if you're building this as a tree structure... See the fiddle example. This would actually apply to all links inside divs that are children of other divs, so you could restrict this by performing a $("div.tree").find("div > div") selection and binding the event to that set to make children divs behave the same.

Alternatively, if you just want to see something fun that may be along the lines of what you're attempting to do, here's a fiddle I made while messing around with tree style navigation. It might lead you to consider other approaches, especially since I'm not sure your code has taken into consideration the matter of displaying those divs again in the event that wasn't what the user really wanted.

Collectives™ on Stack Overflow

jQuery regex selector

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related