Question

我在html中有一个旋转木马控件，我在滑块中有10个元素（带文本的div），你可以说在父div中有10个孩子，我想检查条件并想要相应地删除它们。这是我做的，我把所有的孩子div放在一个主父div中，并创建另一个父div，它是空白的，现在完全隐藏，每次我删除任何子div同时检查一些条件我在隐藏的父div中添加相同的孩子在从主父div中删除它之前。类似地，在将子div添加回主父div之前，我将其添加到主div后从隐藏div中删除该子节点。现在，问题是我想以相同的顺序添加删除的div，例如我删除div 3和div 5现在父有div 1，div 2，div4和div 6现在我想要添加div 5列表所以，该列表应该成为div1，div2，div4 div 5 div 6等等......但是按顺序保持它们似乎很难。请查看代码并建议我任何替代方案或任何您认为我做错的事情。

    <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>&nbsp;</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>

谢谢

Answer 1

当插回到可见的div时，检查已经存在的孩子们的id，并在你要追加的孩子之前搜索最大的id，一旦你发现它只是用jquery方法插入div {{ 1}}它会出现在它之后。
如果你不使用jquery，你也可以使用.after，但这看起来像是一个Bootstrap轮播，所以我觉得你在那里得到了jquery。

按顺序在Carousel控件中添加和删除元素

1 个答案: