Javascriptは、foreachループの最初のIDのみを取得します。どうして？

Question

foreachループを使用して、異なるIDを持つタブを取得します。この方法では、ids tab1、tab2、tab3などでタブを取得します。javascriptを使用して各タブのIDを取得する場合は、最初のタブのIDのみを返し、すべてのタブでこれを使用します。 PHPのようにループしません。どうして？

<?php 
foreach ($DB_con->query($foos) as $foo) { 
    ?> 
    <div id='tab<?php echo $counter_foo; ?>'> 

    <div id="divid" style="visibility: hidden"><?php echo $counter_foo; ?></div> 
    <script> 
    $(document).ready(function() { 
     var dividvalue = document.getElementById('divid').innerHTML; 
     alert(dividvalue); 
    }); 
    </script> 
    <?php 
} 
?> 

Answer 1

変更classにあなたのHTMLでid、およびJavaScriptでgetElementsByClassName代わりのgetElementByIdあなたを使用しています。

あなたのdiv：

<div class="divid"> <!-- etc --> 

とあなたのJS ...

var dividvalue = document.getElementsByClassName('divid')[0].innerHTML; 

はまた、一貫性のためにdivclassにdividを変更することを検討してください。

完全に編集コード：通常、DOMのid ** MUSTあたりとして

<script> 
var i = 0; 
</script> 
<?php 
foreach ($DB_con->query($foos) as $foo) { 
    ?> 
    <div id='tab<?php echo $counter_foo; ?>'> 

    <div class="divclass" style="visibility: hidden"><?php echo $counter_foo; ?></div> 
    <script> 
    $(document).ready(function() { 
     var divclassvalue = document.getElementsByClassName('divclass')[i].innerHTML; 
     alert(divclassvalue); 
     i++; 
    }); 
    </script> 
    <?php 
} 
?>