My php code goes something like this way-

for($i=1;$i<=$n;$i++)
{
$id='selectThisID-' . $i;
?>
<div id="<?php echo $id;?>">On Select this Div(say #selectThisID-3)<?php echo $field-n; ?></div>

<?php $id= 'paraID-' . $i;
<p id="<?php echo $id; ?>" style="display:none">Toggle this para(say #paraID-3) for selected ID only</p>
}

Now how can I handle this variable number of id's in my jQuery. As I know for single div statement it could be:

    <script>
        $(document).ready(function(){
            $("[id^=selectThisID-]").click(function(){
                $("[id^=paraID-]").toggle();
            });
        });
</script>

So on selecting element with id '#selectThisID-1', <p> will toggle. How can I use #selectThisID-2, #selectThisID-3....#selectThisID-n as jQuery selector. How can I get value of 'n' from php code to jQuery? Please help.

Thanks in advance.

Edit:

Suppose $n=5, so there are total 5 div elements. Now the problem is that when I select any of div(say #selectThisID-3) all <p> elements get toggled(i.e.

with #paraID-1, #paraID-2....#paraID-5 all toggled). However I need to toggle para-3 when div-3 selected, toggle para-4 when div-4 selected and so on. Please help.

My php code goes something like this way-

for($i=1;$i<=$n;$i++)
{
$id='selectThisID-' . $i;
?>
<div id="<?php echo $id;?>">On Select this Div(say #selectThisID-3)<?php echo $field-n; ?></div>

<?php $id= 'paraID-' . $i;
<p id="<?php echo $id; ?>" style="display:none">Toggle this para(say #paraID-3) for selected ID only</p>
}

Now how can I handle this variable number of id's in my jQuery. As I know for single div statement it could be:

    <script>
        $(document).ready(function(){
            $("[id^=selectThisID-]").click(function(){
                $("[id^=paraID-]").toggle();
            });
        });
</script>

So on selecting element with id '#selectThisID-1', <p> will toggle. How can I use #selectThisID-2, #selectThisID-3....#selectThisID-n as jQuery selector. How can I get value of 'n' from php code to jQuery? Please help.

Thanks in advance.

Edit:

Suppose $n=5, so there are total 5 div elements. Now the problem is that when I select any of div(say #selectThisID-3) all <p> elements get toggled(i.e.

with #paraID-1, #paraID-2....#paraID-5 all toggled). However I need to toggle para-3 when div-3 selected, toggle para-4 when div-4 selected and so on. Please help.

• php
• javascript
• jquery

• 1 much simpler just adding a mon class instead of using ID – charlietfl Commented Mar 11, 2013 at 22:31

4 Answers 4

$("[id^=selectThisID-]").click(function(){
    $("#paraID-"+this.id.split('-')[1]).toggle();
});

Instead of ID use class. This is more efficient then what you have there. For example:

$(".your-class").each(function(index, domEl){
              $(this).val();
              $(this).toggle();
        });

Using class on elements and index() method to match them with no ID's involved:

var $divGroup=$('.divClass').click(function(){
    var index=$divGroup.index(this);
    $('.paragraphClass').hide().eq( index).show();
})

DEMO: http://jsfiddle/UZqD3/

Instead of using an id, use a class and put the corresponding p id in a custom attribute:

$(".selectThisID").click(function(){
    $("paraID-" + this.getAttribute("data-target")).toggle();
});

HTML:

<div class="selectThisID" data-target="5">foo</div>
<p id="paraID-5">bar</p>