J'ai un contrôle de carrousel en html et j'ai 10 éléments (divs avec texte) dans le curseur que vous pourriez dire comme ayant 10 enfants à l'intérieur div div et je veux vérifier les conditions et veulent pour les enlever en conséquence. Voici ce que j'ai fait, j'ai placé tous les divs enfants dans un div parent principal et créé un autre div parent qui est vide et complètement caché maintenant, chaque fois que je supprime un enfant div tout en vérifiant une condition j'ajoute le même enfant dans div div avant de le supprimer du div parent principal. De même, avant de rajouter un div enfant au div parent principal, je supprime l'enfant du div masqué après l'avoir ajouté au div principal. Maintenant, le problème est que je veux ajouter les divs supprimés dans la même séquence qu'ils étaient pour, par exemple, j'ai enlevé div 3 et div 5 maintenant le parent a div 1, div 2, div4 et div 6 et maintenant je veux ajouter div 5 dans liste donc, cette liste devrait devenir div1, div2, div4 div 5 div 6 et ainsi de suite ... mais les garder séquentiellement semble difficile. S'il vous plaît jeter un oeil sur le code et me suggérer une alternative ou tout ce que vous pensez que je fais mal.Ajout et suppression d'éléments du contrôle Carousel en séquence
<div id="myCarousel" class="carousel slide " data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div id="parentDiv" class="carousel-inner">
<div id="1" class="item active lx-carouselimage1 lx-height-600">
<div class="lx-carouselheadertext align-center">1A better way to get the mortgage!</div>
<div class="carouseltext align-center">
</div>
</div>
<div id="2" class="item lx-carouselimage2 lx-height-600">
<div class="lx-carouselheadertext align-center">2A better way to get the mortgage!</div>
<div class="carouseltext align-center">
</div>
</div>
<div id="3" class="item lx-carouselimage3 lx-height-600">
<div class="lx-carouselheadertext align-center">3A better way to get the mortgage!</div>
<div class="carouseltext align-center"></div>
</div>
</div>
<div style="visibility:hidden" id="HiddenparentDiv" class="carousel-inner">
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-left.png" class="lx-width-50"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-right.png" class="lx-width-50"></span>
</a>
</div>
<div></div>
<p> </p>
Name of child element to be removed: <input id="nameOfChild" type="text" value="child2"><input type="button" value="Remove Element" onClick="var name=document.getElementById('nameOfChild').value; removeElement('parentDiv', name);">
<br><br>
For those who are lazy in typing in the actual names, we have these handy-dandy buttons:
<input type="button" value="Remove child1" onClick="removeElement('parentDiv', '1', 'HiddenparentDiv');">
<input type="button" value="Remove child2" onClick="removeElement('parentDiv', '2', 'HiddenparentDiv');">
<input type="button" value="Remove child3" onClick="removeElement('parentDiv', '3','HiddenparentDiv');">
<input type="button" value="Remove parentDiv" onClick="removeElement('parentDiv', 'parentDiv',' HiddenparentDiv');">
<input type="button" value="Add child1" onClick="addElement('parentDiv','1','HiddenparentDiv');">
<input type="button" value="Add child2" onClick="addElement('parentDiv','2','HiddenparentDiv');">
<input type="button" value="Add child3" onClick="addElement('parentDiv','3','HiddenparentDiv');">
<script>
var child1 = document.getElementById('parentDiv').getElementById('1');
//var myID = document.getElementById('child1');
//var children = document.getElementById('1').childNodes;
alert(child1);
function GetIndex(childId)
{
alert("Inside GetIndex ");
var tempID = childId - 1;
var parent = document.getElementById('parentDiv');
while (tempID >= 0)
{
var childid = '#' + tempID;
alert($('#parentDiv').find('#1'));
// var child = document.getElementById('parentDiv').childNodes;
//var child = document.getElementById('childDiv');
// alert(child);
//var child = document.hasChildNodes;
//var child = document.getElementById(tempID).childNodes;
var child = document.getElementById('parentDiv').innerHTML;
alert(child);
if (child != null)
{
alert("Inside IF ");
break;
}
else
{
alert("Inside elSE ");
tempID--;
}
}
if (tempID < 0)
{
tempID = 0;
}
return tempID;
}
function test() {
alert(document.getElementById('hiddenDiv'));
}
function removeElement(parentDiv, childDiv, hiddenDiv) {
if (childDiv == parentDiv) {
alert("The parent div cannot be removed.");
}
else {
var hidden = document.getElementById(hiddenDiv);
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
hidden.appendChild(child);
parent.removeChild(child);
}
}
function addElement(parentDiv, childDiv, hiddenDiv) {
var hidden = document.getElementById(hiddenDiv);
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
// var index = GetIndex(child.id);
//alert(index);
parent.appendChild(child.childNodes[GetIndex(child.id)]);
hidden.removeChild(child);
}
function myFunction() {
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
}
</script>
Merci