用jquery增加div id

时间:2014-09-13 06:29:46

标签: javascript jquery html css

我有以下代码,请注意我是这样的菜鸟如何使用jquery脚本增加div中的数字?

        if($res >= 1){
        $i=1;
            while($row = mysqli_fetch_array($qry)){

            echo   "<div class='imgAddCntr'> 
                       <div id='div".$i."' class='contentbox'>      
                        //content here
                       </div>
                       <div id='imgAdd'>
                         <img class='images' alt='CDL Training' src='".$imgLInk.$row['img']."'/>
                       </div>
                     </div>";   
                   $i++;
               }
             } 

我试图瞄准上面的循环及其div值

    $(document).ready(function() {

       $('#div1').hide();

           $(".images").hover(
                function () {
                  $("#div1").show();
                    },
                 function () {
                  $("#div1").hide();
            });
     });

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

使用jQuery属性选择器jQuery( "[attribute='value']" )

$(document).ready(function() {
    $('[id^=div]').hide();
    $(".images").hover(function() {
        $(this).closest('div.imgAddCntr').find('[id^=div]').show();
    }, function() {
        $(this).closest('div.imgAddCntr').find('[id^=div]').hide();
    });
});

或者只是避免使用id并使用class代替,这将是更好的方法

<强> PHP

if ($res >= 1) {
    while ($row = mysqli_fetch_array($qry)) {
        echo "<div class='imgAddCntr'> 
                       <div class='contentbox'>      
                        //content here
                       </div>
                       <div class='imgAdd'>
                         <img class='images' alt='CDL Training' src='".$imgLInk.$row['img']."'/>
                       </div>
                     </div>";
    }
} 

<强>的jQuery

$(document).ready(function() {
    $('.contentbox').hide();
    $(".images").hover(function() {
        $(this).closest('div.imgAddCntr').find('.contentbox').show();
    }, function() {
        $(this).closest('div.imgAddCntr').find('.contentbox').hide();
    });
});