仅将类添加到一组动态创建的 DIV 中的第一个 DIV，而不使用 jQuery答案

【问题标题】：Adding class to only the first DIV from a set of dynamically created DIV's without using jQuery仅将类添加到一组动态创建的 DIV 中的第一个 DIV，而不使用 jQuery
【发布时间】：2018-02-19 13:17:21
【问题描述】：

我正在尝试使用 AngularJS 和 Bootstrap 在模式中创建幻灯片。所以，到目前为止，我已经动态地创建了 DIV，但我的问题是我必须只将活动类添加到第一个 DIV。

不使用 jQuery 怎么办？

另外，想知道是否有其他方法可以实现相同的功能？任何线索将不胜感激。

代码如下：

<!DOCTYPE html>
<html ng-app="modalApp">
  <head>
    <title>This is a custom modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="modalAppController">

      <button class="btn btn-primary" data-toggle="modal" data-target="#whatsNewModal">Open Modal</button>
      <!-- Whats New feature modal -->
<div id="whatsNewModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- Modal Header -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">x</button>
          <h3 class="modal-title" style="color: #000"><strong><i class="fa fa-bullhorn" style="margin-right: 10px"></i><span>What's New</span></strong></h3>
        </div>

        <!-- Modal Body / Modal Content -->

        <div class="modal-body">
          <div id="whatsNewCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">

            <!-- Carousel Images -->

            <div class="carousel-inner" role="listbox" id="carousel-in">

              <div id="carouselContent">

              </div>


            <!-- Carousel Controls -->
                <a class="left carousel-control" href="#whatsNewCarousel" role="button" data-slide="prev" style="background: transparent">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="color: #dcdde1; top: 40%; left: 10px; font-size: 40px"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#whatsNewCarousel" role="button" data-slide="next" style="background: transparent">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color: #dcdde1; top: 40%; right: 22px; font-size: 40px"></span>
                    <span class="sr-only">Previous</span>
                </a>


          </div>
        </div>

      </div>
    </div>
</div>
    </div>
  </body>
</html>

app.js

(function(){
  'use strict';

  angular.module('modalApp', [])
  .controller('modalAppController', modalAppController)
  modalAppController.$inject = ['$scope'];
  function modalAppController($scope){
    $scope.carouselData = function(src, head, desc){

// Creation of item div

      $scope.carouselCon = document.getElementById("carouselContent");
      $scope.newDiv = document.createElement("DIV");
      $scope.newDiv.setAttribute("class", "item active");
      $scope.carouselCon.appendChild($scope.newDiv);


// Creation of Image Element

      $scope.image = document.createElement("img");
      $scope.image.setAttribute("src", src);
      $scope.image.setAttribute("class", "img-fluid d-block");
      $scope.newDiv.appendChild($scope.image);

// Creation of Image Content

      $scope.h3 = document.createElement("H3");
      $scope.h4 = document.createElement("H4");

      $scope.h3Content = document.createTextNode(head);
      $scope.h4Content = document.createTextNode(desc);
      $scope.newDiv.appendChild($scope.h3.appendChild($scope.h3Content));
      $scope.newDiv.appendChild($scope.h4.appendChild($scope.h4Content));

    };

    $scope.carouselData("Screen.png", "Feature 1", "Here goes the description");
    $scope.carouselData("Screen2.png", "Feature 2", "Here goes the description"); // I want to pass more functions like this.
  }
})();

【问题讨论】：

你不要在控制器中做这些事情。
那么，我应该使用该服务吗？或者这是一个好的代码实践？
您应该使用可以在模板中使用的角度指令。 ng-repeat、ng-if、ng-class 等。
你能再亮一点吗？这里绝对是新手。
这是你能做的最糟糕的代码实践。并且它将保证未来的低质量和可维护性问题。阅读有关正确的 AngularJS 工作流程、指令、架构的信息。从官方教程开始。你想使用指令。甚至可以创建一个新的。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

是的。您可以使用CSS :first-child Selector 选择一个div。

var element = angular.element( document.querySelector( '.classname:first-child' ) );
element.addClass("new_class_name");

【讨论】：

如果您对上面的代码不清楚，请告诉我
原来的问题（以及你的答案）是对 angularjs 的完全滥用这一事实不会打扰你吗？
是的，知道了。问题是我绝对是 AngularJS 的菜鸟，但我正在努力。将使用适当的 AngularJs 来做到这一点
这个问题可能代表滥用角度，但我的回答不是。
@spyshiv 是的。确实如此。在控制器中手动修改 DOM 元素是一种不好的做法。你应该修改作用域变量，让角度指令和摘要循环发挥它们的魔力。