隐藏“prepended”li元素的列表

正在尝试创建列表（“ul”），其后我会用jquery添加值，用.prepend（）函数。我想把所有这些新的价值都隐藏起来，比如说在公司之外，后来我会展示给他们，但是我加入他们，他们必须隐藏起来。有没有办法做这样的事情？ enter image description here 隐藏“prepended”li元素的列表

我做了一张画给我的问题，所以我很想把我加5和6的li元素使用jQuery做，身份证，他们必须在“隐藏区”，并在“可见区域列表“不会改变。到目前为止，我已经创建了这个列表，但是我在可见区域添加了新的元素，并且在可见区域的li元素顺序如下所示：“6,5,1,2”。

编辑。

我累了解决我的问题@mboldt建议，但它没有为我工作，或者我做了一些不正确的事情。我的代码：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <style type="text/css"> 
    .item-list-inner { 
    float:left; 
    width: 600px; 
    overflow: hidden; 

    border:2px solid black; 
    } 

    .item-list-ul { 
     position:relative; 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
     width:9999px;  
     height:100px; 
    } 

    .item-list-ul li { 
     display: inline-block; 
     *display: inline; /*IE7*/ 
     *zoom: 1;   /*IE7*/ 
     float: left; 
    } 

    .item{ 
     width:80px; 
     height:80px; 
     border:1px solid red; 
     margin:7px; 

    } 
    </style> 
</head> 
<body> 
<p></p> 
<p></p> 
<p></p> 
<p></p> 
    <div class="item-list-inner"> 
     <ul class="item-list-ul"> 
       <li> 
        <div class="item">1</div> 
       </li> 
       <li> 
        <div class="item">2</div> 
       </li> 
       <li> 
        <div class="item">3</div> 
       </li> 
       <li> 
        <div class="item">4</div> 
       </li> 
       <li> 
        <div class="item">5</div> 
       </li> 
       <li> 
        <div class="item">6</div> 
       </li> 
     </ul> 

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

但是，当我试图在前面加上新元素使用jQuery：

$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")

新的li元素从列表进去，在而不是“隐藏”的地方：第一行是结果我想要得到，就像新元素进入隐形区域（隐藏区域），并且不会显示，直到我旋转列表。第二行是我现在用我的代码得到的结果。正如你所看到的那样，我预先添加了新的li元素，它在列表的前面，但在可见区域，并移动其他li元素。

enter image description here

来源

2014-09-02 mat1c

请告诉我们你到目前为止试过的东西吗？在线演示也会很棒。 – 2014-09-02 09:59:55

隐藏区域是什么意思？ 'display：none' ???或者在视图外'left：-1000px'？ – 2014-09-02 10:01:22

在这种情况下，一旦将新项目添加到列表中，您还将整个列表80px（一个列表项目的宽度）移动到左侧，以确保前置项目移动到不可见区域。 – mboldt 2014-09-03 07:00:35

您可以将它们添加类 “.addClass（ '隐藏'）”，并在CSS文件 “.hidden {显示：无;}

后来你只需要” .removeClass（'隐藏的”）”，以显示它们。

来源

2014-09-02 10:00:19 danielg44k

它是否将可见区域上的元素排序为“6,5,1,2”？我不这么认为。 IMO这个问题太广泛了。 – 2014-09-02 10:04:07

他希望那些新的元素将在列表顶部 – danielg44k 2014-09-02 10:06:33

如果您创建的列表项将其添加到列表中，然后才能通过jQuery的方法sipmly隐藏像这样

var item = $("<li>hidden item</li>"); 
$(item).hide(); 
$("#list").prepend(item);

退房ŧ他的jsfiddle，它只显示3个列表项，但如果你用萤火虫看源代码，你会看到另一个隐藏的列表项被添加。

但是，如果您试图实现像滑块一样的东西，那么overflow-property可能就是您正在查找的东西（很难区分给出的信息）。

编辑现在 你更新你的问题，我想我现在知道你正在尝试做我创建了一个新的jsfiddle用另一种解决方案。看看它是否是你想要做的，以及代码是否可以帮助你。在jsfiddle中有两个按钮，一个用于向右滚动列表，另一个用于在列表左侧的“不可见区域”添加一个项目。注意：这并不是很干净，即滚动时仍有边框显示，实际上应该隐藏，但我认为这足以显示该想法。

来源

2014-09-02 10:08:10 mboldt

很多我的目标是制作像滑块一样的元素，就像从右到左的元素一样，并且在元素到达左侧的隐藏区域之后，它从列表中移除（它不像他们转盘那样的旋转木马） – mat1c 2014-09-02 10:12:05

我做了一次类似的事情，你的可见区域（红线之间）将是一个固定宽度和溢出的div：隐藏。 ul元素应该相对定位，并且您可以通过javascript将它移动到左侧或右侧，以将列表项目滑入或滑出可见区域。 – mboldt 2014-09-02 10:27:28

我试图做你喜欢的东西，但到目前为止，它对我来说是错误的。结果编辑第一篇文章。 – mat1c 2014-09-02 22:28:04

隐藏“prepended”li元素的列表

回答

相关问题