2016-08-06 10 views
0

jquery関数を作成して、divのカスタム属性をチェックし、それに従ってHTMLを変更したいと考えています。jqueryを使用してcustum属性でhtmlを動的に変更する方法

私たちは、同じクラス

<div class="dynamic" data-rate="2"></div> 
<div class="dynamic" data-rate="3"></div> 
<div class="dynamic" data-rate="4"></div> 

付きのdivののn個の数を持っている場合は、すべての異なるデータ・レート値

私が欲しいを持って見ることができるようにと同じように、この

<div class="dynamic" data-rate="2"> 
1 
2 
</div> 

<div class="dynamic" data-rate="3"> 
1 
2 
3 
</div> 

のような、その出力データレートの値を変更した場合でも、ページ読み込み後でも、データレート値に従ってその内部のHTMLを変更することができます

+0

出力のロジックについて説明していませんか?手動でhtml属性を変更する必要はありませんか?またはあなたは何ですか? –

答えて

1

このコードを試してください

<html> 
<head> 
<title>Dynamic add html</title> 
<script src="jquery-1.7.2.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.dynamic').each(function(){ 
      var val=$(this).attr('data-rate'); 
      if(val!='') 
      { 
       for(i=1;i<=val;i++) 
       {     
        $(this).append(i)+ "\n"; 
       } 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div class="dynamic" data-rate="2"></div> 
    <div class="dynamic" data-rate="3"></div> 
    <div class="dynamic" data-rate="4"></div> 
</body> 
</html> 
関連する問題