如何在新的动态元素上应用bootstrap css？

时间：2018-03-27 03:17:31

标签： jquery html css twitter-bootstrap

如何在新的动态元素上应用bootstrap css？

我在使用动态dom元素的boostrap上遇到问题。

如果我加载包含整个html的页面，它可以工作，但是当添加新的div时，我不能使用bootstrap类。

为了测试，我添加了一个类来改变背景颜色，它运行良好。

我将代码添加到jsfiddle：https://jsfiddle.net/Lpw0726j/

在那里我取消注释div应该如何。

function getFirstDay(theYear, theMonth) {
  var firstDate = new Date(theYear, theMonth, 1)
  return firstDate.getDay()
}


var getDaysInMonth = function(month, year) {
  return new Date(year, month, 0).getDate();
}

$(function() {
  var firstDay = getFirstDay(2018, 2);
  var howMany = getDaysInMonth(2, 2018);

  var dayCounter = 1;
  var done = false;
  var weekCounter = 0;

  while (!done) {
    weekCounter++;
    week = "week" + weekCounter;
    jQuery('<div/>', {
      id: week
    }).appendTo('.container');

    for (var i = 0; i < 7; i++) {
      if ($(week).siblings().length == 1 && i < firstDay) {
        newC.innerHTML = ""
        jQuery('<div/>', {
          id: week,
          class: 'col border',
          text: "x"
        }).appendTo('#week' + weekCounter);
        continue
      }
      if (dayCounter == howMany) {
        // no more rows after this one
        done = true
      }

      if (dayCounter <= howMany) {
        dayCounter++;
        jQuery('<div/>', {
          //id: week,
          class: 'col border',
          text: dayCounter
        }).addClass('col border').appendTo('#week' + weekCounter);
      } else {

      }
    }

  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <h1>Month</h1>
</div>

2 个答案:

答案 0 :(得分：2)

我尝试按照这种模式进行操作，我认为在addClass lopp开始时添加一周row时，您错过了while：

week = "week" + weekCounter;
jQuery('<div/>', {
    id: week
}).addClass('row').appendTo('.container');


function getFirstDay(theYear, theMonth) {
  var firstDate = new Date(theYear, theMonth, 1)
  return firstDate.getDay()
}

var getDaysInMonth = function (month, year) {
  return new Date(year, month, 0).getDate();
}

$(function () {
  var firstDay = getFirstDay(2018, 2);
  var howMany = getDaysInMonth(2, 2018);

  var dayCounter = 1;
  var done = false;
  var weekCounter = 0;
                
  while (!done) {
  weekCounter++;
  week = "week" + weekCounter;
  jQuery('<div/>', {
    id: week
  }).addClass('row').appendTo('.container');

  for (var i = 0; i < 7; i++) {
    if ($(week).siblings().length == 1 && i < firstDay) {
      newC.innerHTML = ""
      jQuery('<div/>', {
        id: week,
        class: 'col border',
        text: "x"
      }).appendTo('#week' + weekCounter);
      continue
    }
    if (dayCounter == howMany) {
      // no more rows after this one
      done = true
    }
                        
    if (dayCounter <= howMany) {
      dayCounter++;
      jQuery('<div/>', {
        //id: week,
        class: 'col border',
        text: dayCounter
      }).addClass('col border').appendTo('#week' + weekCounter);
    } else {

    }
  }
}
});
<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <title>Calendar</title>

    </head>
    <body>
        <div class="container">
            <h1>Month</h1>

            <div class="row">
                <div class="col border ">Mon</div>
                <div class="col border">Tue</div>
                <div class="col border">Wen</div>
                <div class="col border">Thu</div>
                <div class="col border">Fri</div>
                <div class="col border">Sat</div>
                <div class="col border">Sun</div>
            </div>

            <div class="row aa" style="height: 100px;">
                <div class="col border">1</div>
                <div class="col border">2</div>
                <div class="col border">3</div>
                <div class="col border">4</div>
                <div class="col border">5</div>
                <div class="col border">6</div>
                <div class="col border">7</div>
            </div>
        </div>

    </body>
</html>

答案 1 :(得分：0)

您错过了在此处添加课程row和aa以及style: "height: 100px"：

jQuery('<div/>', {
    id: week,
    class: "row aa",
    style: "height: 100px"
}).appendTo('.container');


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <title>Calendar</title>

    </head>
    <body>
        <div class="container">
            <h1>Month</h1>

            <div class="row">
                <div class="col border ">Mon</div>
                <div class="col border">Tue</div>
                <div class="col border">Wen</div>
                <div class="col border">Thu</div>
                <div class="col border">Fri</div>
                <div class="col border">Sat</div>
                <div class="col border">Sun</div>
            </div>


            <div class="row aa" style="height: 100px;">
                <div class="col border">1</div>
                <div class="col border">2</div>
                <div class="col border">3</div>
                <div class="col border">4</div>
                <div class="col border">5</div>
                <div class="col border">6</div>
                <div class="col border">7</div>
            </div>




        </div>

        <script>

            function getFirstDay(theYear, theMonth) {
                var firstDate = new Date(theYear, theMonth, 1)
                return firstDate.getDay()
            }


            var getDaysInMonth = function (month, year) {
                return new Date(year, month, 0).getDate();
            }

            $(function () {
                var firstDay = getFirstDay(2018, 2);
                var howMany = getDaysInMonth(2, 2018);

                var dayCounter = 1;
                var done = false;
                var weekCounter = 0;
                
                while (!done) {
                    weekCounter++;
                    week = "week" + weekCounter;
                    jQuery('<div/>', {
                        id: week,
                        class: "row aa",
                        style: "height: 100px"
                    }).appendTo('.container');

                    for (var i = 0; i < 7; i++) {
                        if ($(week).siblings().length == 1 && i < firstDay) {
                            newC.innerHTML = ""
                            jQuery('<div/>', {
                                id: week,
                                class: 'col border',
                                text: "x"
                            }).appendTo('#week' + weekCounter);
                            continue
                        }
                        if (dayCounter == howMany) {
                            // no more rows after this one
                            done = true
                        }
                        
                        if (dayCounter <= howMany) {
                            dayCounter++;
                            jQuery('<div/>', {
                                //id: week,
                                class: 'col border',
                                text: dayCounter
                            }).addClass('col border').appendTo('#week' + weekCounter);
                        } else {

                        }
                    }

                }
            });

        </script>
    </body>
</html>

相关问题
最新问题