Javascript 如何多次追加元素（向下滑动）_Javascript_Jquery_Html_Css

Javascript 如何多次追加元素（向下滑动）

javascript jquery html css

Javascript 如何多次追加元素（向下滑动）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我用classmoree单击div时，我想附加5个li元素。它工作正常，但当我单击“更多”时，我想将这些按钮添加到列表的末尾。现在这些物品都在乞讨处。此外，有没有一种方法可以通过效果向下滑动进行附加？以下是我的片段： $（文档）.ready（函数（）{ 对于（变量i=0；ili{ 列表样式：无；填充顶部：10px；边框：1px纯绿色；边缘顶部：10px； } 莫雷先生{ 宽度：30px；背景：黄色； } 头衔加5 您没有添加5个列表项，而是向同一元素添加了5次单击事件侦听器

当我用class

moree

单击div时，我想附加5个

li

元素。它工作正常，但当我单击“更多”时，我想将这些按钮添加到列表的末尾。现在这些物品都在乞讨处。

此外，有没有一种方法可以通过效果向下滑动进行附加？以下是我的片段：

$（文档）.ready（函数（）{
对于（变量i=0；i<5；i++）{
$（“.moree”）。单击（函数（）{
$（this）.closest（“.content”）.append（“标题2”）；
});
}  
});
ol>li{
列表样式：无；
填充顶部：10px；
边框：1px纯绿色；
边缘顶部：10px；
}
莫雷先生{
宽度：30px；
背景：黄色；
}

头衔
加5
您没有添加5个列表项，而是向同一元素添加了5次单击事件侦听器
这可能是您想要的：

$（文档）.ready（函数（）{
$（“.moree”）。在（'click'，function（）上{
对于（变量i=0；i<5；i++）{
$（this）.最近的（'.content'）。查找（'ol'）。追加（'Title'+i+''）；
}
setTimeout（函数（）{$（'li.no-height'）.removeClass（'no-height'）；}，5）；
});
})
ol>li{
列表样式：无；
填充顶部：10px；
边框：1px纯绿色；
边缘顶部：10px；
高度：40px；
溢出：隐藏；
过渡：所有0.4s缓解；
}
ol>li.no-height{
身高：0；
填充：0；
边界：0；
}
莫雷先生{
宽度：30px；
背景：黄色；
}

头衔
加5
您没有添加5个列表项，而是向同一元素添加了5次单击事件侦听器
这可能是您想要的：

$（文档）.ready（函数（）{
$（“.moree”）。在（'click'，function（）上{
对于（变量i=0；i<5；i++）{
$（this）.最近的（'.content'）。查找（'ol'）。追加（'Title'+i+''）；
}
setTimeout（函数（）{$（'li.no-height'）.removeClass（'no-height'）；}，5）；
});
})
ol>li{
列表样式：无；
填充顶部：10px；
边框：1px纯绿色；
边缘顶部：10px；
高度：40px；
溢出：隐藏；
过渡：所有0.4s缓解；
}
ol>li.no-height{
身高：0；
填充：0；
边界：0；
}
莫雷先生{
宽度：30px；
背景：黄色；
}

头衔
加5
您好，请尝试此JQuery代码，希望它对您有所帮助
       $(document).ready(function () {
       for (var i = 0; i < 5; i++) {
        $(".moree").click(function () {
            $(this).closest('.content').prepend('<ol ><li>Title 2</li>   
        </ol>');
        });
         }  

         })

$（文档）.ready（函数（）{
对于（变量i=0；i<5；i++）{
$（“.moree”）。单击（函数（）{
$（this）.最近（'.content'）。前置（'标题2
');
});
}  
})

试试下面的小提琴
希望它有帮助
您好，请尝试此JQuery代码，希望它能帮助您
       $(document).ready(function () {
       for (var i = 0; i < 5; i++) {
        $(".moree").click(function () {
            $(this).closest('.content').prepend('<ol ><li>Title 2</li>   
        </ol>');
        });
         }  

         })

$（文档）.ready（函数（）{
对于（变量i=0；i<5；i++）{
$（“.moree”）。单击（函数（）{
$（this）.最近（'.content'）。前置（'标题2
');
});
}  
})

试试下面的小提琴
希望能有所帮助你是说这个吗？它只是稍微改进了您的示例中的幻灯片动画

$（文档）.ready（函数（）{
$（“.moree”）。单击（函数（）{
var延迟=0；
对于（var i=0；i<5；i++）{
$（本）
.prev（）
.append（“标题2”）
.儿童（）
.last（）
.hide（）
.延迟（延迟）
.向下滑动（400）；
延迟+=400；
}
});
});
ol>li{list style:none；padding top:10px；border:1px纯绿色；margin top:10px；}
.moree{宽度：30px；背景：黄色；}

头衔
加5
你是这个意思吗？它只是稍微改进了您的示例中的幻灯片动画

$（文档）.ready（函数（）{
$（“.moree”）。单击（函数（）{
var延迟=0；
对于（var i=0；i<5；i++）{
$（本）
.prev（）
.append（“标题2”）
.儿童（）
.last（）
.hide（）
.延迟（延迟）
.向下滑动（400）；
延迟+=400；
}
});
});
ol>li{list style:none；padding top:10px；border:1px纯绿色；margin top:10px；}
.moree{宽度：30px；背景：黄色；}

头衔
加5
首先，您应该将“moree”类移到有序列表之外
<html>
<head>
</head>
<body>
 <div class="content">
  <ol>
   <li>title</li>
  </ol>
  <div class="moree">Add 5</div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>


头衔
加5

之后，在jquery中，将for循环移动到click函数内部
为了实现滑动效果，首先我们必须隐藏必须附加的元素，然后我们使用“appendTo（）”函数附加到父元素，然后我们可以使用“show（）”函数滑动附加的列表
$(document).ready(function () {
        $('.moree').on('click', function(){
            for(var i=0; i<5; i++){
                $('<li>Title 2</li>').hide().appendTo('ol').show("slow");
            }
        });
    });

$（文档）.ready（函数（）{
$（'.moree'）。在（'click'，function（）上{
对于（var i=0；i首先，您应该将“moree”类移到有序列表之外
<html>
<head>
</head>
<body>
 <div class="content">
  <ol>
   <li>title</li>
  </ol>
  <div class="moree">Add 5</div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>


头衔
加5

之后，在jquery中，将for循环移动到click函数内部
为了实现滑动效果，首先我们必须隐藏必须附加的元素，然后我们使用“appendTo（）”函数附加到父元素，然后我们可以使用“show（）”函数滑动附加的列表
$(document).ready(function () {
        $('.moree').on('click', function(){
            for(var i=0; i<5; i++){
                $('<li>Title 2</li>').hide().appendTo('ol').show("slow");
            }
        });
    });

$（文档）.ready（函数（）{
$（'.moree'）。在（'click'，function（）上{
对于（var i=0；i使用prepend（…
而不是append（…
）@DavidDomain是否有一种具有向下滑动效果的prepend方法？您的HTML无效。您不能将div
作为ol
的直接子元素。请使用prepend（…
而不是append）（…
@DavidDomain是否有一种方法可以使用向下滑动效果预结束？您的HTML无效。您不能