Bootstrap Nesting Carousel

The bootstrap carousel is implemented using the following levels of HTML code:

<div class= "Carousel Slide" id= "Carouselid" >
<div class= "Carousel-inner" >
<div class= "Item" >

<div class= "Carousel Slide" id= "carouselid1" >

<div class= "Carousel-inner" >

<div class= "item" > Layer Two container first frame content </div>
<div class= "Item" > First level Container two frame content </div>

......

</ d i v > 　　　　　　　　

<ol class= "Carousel-indicators" >
<li class= "active" data-slide-to= "0" data-target= "#CarouselId1" ></li>
<li data-slide-to= "1" data-target= "#CarouselId1" ></li>
<li data-slide-to= "2" data-target= "#CarouselId1" ></li>

......
</ol>

<a data-slide= "prev" class= "left Carousel-control" href= "#CarouselId1" ></a>
<a data-slide= "Next" class= "right Carousel-control" href= "#CarouselId1" ></a>

</div>

</div>
<div class= "Item" > first-level container first frame content </div>
<div class= "Item" > First level Container two frame content </div>

......

</div>

<ol class= "carousel-indicators" >
<li class= "active" data-slide-to= "0" data-target= "#CarouselId" ></LI>
<li data-slide-to=" 1 "data-target=" #CarouselId 1 "></LI>
<li data-slide-to= "2" data-target= "#CarouselId 1 "></LI>

......
</ol>

<a data-slide= "prev" class= "left Carousel-control" href= "#CarouselId" > </a>
<a data-slide= "Next" class= "right Carousel-control" href= "#CarouselId" > </a>
</div>

But if

<div class= "Item" ></div>

In order to nest the carousel, the existing code will be problematic, because in the event bindings in JavaScript, the Select element uses the Find method, when the first layer ID of carouselid is initialized when the class is item, the item nested in item is also selected , it also selects all child elements of class carousel-indicators, and requires manual modification to select the first level child element with children.

Bootstrap Nesting Carousel