jquery php embedding DOM element same problem - php

Question

When i embed or use php loops to create multiple div's with some id.
I want each of them to use with jquery. Say anything like simple hide/show interface.
But as the id is the same it wont work. I assign a variable lets say $i to php loop for the reference of uniqueness. I can assign id to a DOM element with like
<div id="element-<php echo $i ?>">Bla Bla </div>
Php echoes out here perfectly but how do i use it with jquery something like this:
$("#element"+<?php echo $i ?>).toggle();
Here it doesnt works.
How do i do it correctly and where am i going wrong ?
Sorry for bad english.
Thanks

Answer 1

You can try this
<script>
function togl(id)
{
$("#element"+id).toggle();
}
</script>
<?php
for ($i=0;$<10;$i++)
echo '<div id="element-'.$i.'" onclick="toggle('.$i.')">Bla Bla </div>';
?>

Answer 2

the proper syntax for a php code is:
<?php
//code
?>
So here you can clearly see what is the error:
<php echo $i ?>
It should be:
<?php echo $i; ?>
Updated answer:
<?php
for ($k=0;$k<=100;$k++)
echo '<div id="element-'.$k.'" onclick="toggleID('.$k.')">Here is the content of div $k</div>';
?>
<script>
function toggleID(id)
{
$("#element"+id).toggle();
}
</script>

Answer 3

You didn't include the dash in the jQuery code and you also don't need to concatenate the strings:
$("#element-<?php echo $i; ?>").toggle();
PHP is interpreted on the server and JavaScript is interpreted on the client. You should never consider concatenating strings between these environments since they are two different steps in serving your application.

Answer 4

I think your code for the javascript should be like this instead of what you posted.
$("#element-"+<?php echo $i ?>).toggle();
However I wouldn't recommend this approach as it's not very efficiant. It will trigger a lot of jQuery lookups.
You'd be better off giving all the divs in question a class and then using the class to reference them in jQuery.
<div class="toggleThis" id="element-<php echo $i ?>">Bla Bla </div>
$(".toggleThis").toggle();

Answer 5

Your problem is that you didnt' close your php statement:
You're missing the ";?>"
try this:
;?>
ath the end of your statement
EDITED:
plus you're missing the "-" between "element" and "id":
Ex. element-1
try including the "minus":
$("#element-"+id)

Answer 6

The problem is that you cannot have the same ID's. But if you just want simple show/hide functionality, you should add a class to your div instead of an ID. So..
class="toggableDiv"
and then in jQuery
$(".toggableDiv").click();