Javascript 通过jquery重新排列html_Javascript_Jquery_Html

Javascript 通过jquery重新排列html

javascript jquery html

Javascript 通过jquery重新排列html,javascript,jquery,html,Javascript,Jquery,Html,我目前正在从事一个jquery项目，并被要求执行以下操作：创建一个列表来存放地下蔬菜我看待这一点的方式是，正如您将在下面的html中看到的那样，他们希望我获取所有标有“below”的类，并将它们放在通过jquery创建的标题下的自己的列表中（参见下面的jquery代码）我遇到的困难是，当我试图在ul下做准备时，它是在当前li内做的。我也试着在标题下预编。我不确定prepend是否是一种方法，我试图缩小目标范围，并通过类将此列表放在标题下的单独列表中 index.html： <!DOC

我目前正在从事一个jquery项目，并被要求执行以下操作：

创建一个列表来存放地下蔬菜

我看待这一点的方式是，正如您将在下面的html中看到的那样，他们希望我获取所有标有“below”的类，并将它们放在通过jquery创建的标题下的自己的列表中（参见下面的jquery代码）

我遇到的困难是，当我试图在ul下做准备时，它是在当前li内做的。我也试着在标题下预编。我不确定prepend是否是一种方法，我试图缩小目标范围，并通过类将此列表放在标题下的单独列表中

index.html：

<!DOCTYPE html>
<html lang="en-ca">
    <head>
          <meta charset="utf-8">
          <title>HTML rearranger</title>
          <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>

     <ul>
         <li class="below">Potato</li>
         <li class="below">Turnip</li>
         <li class="above">Bean</li>
         <li class="below">Carrot</li>
         <li class="below">Onion</li>
         <li class="above">Corn</li>
         <li class="above">Tomato</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

最终产品应如下所示：

Below ground veggies

.belowPotato
.belowTurnip
.belowBean
.belowCarrot
.belowOnion
.belowCorn
.belowTomato

以下是完整的说明，您可以了解我在做什么（我只需要在我询问的一个部分上提供指导）：

使用jQuery操作HTML文件并重新排列内容。

在这个存储库中使用Fork
不要更改HTML。
使用jQuery对HTML执行以下操作：
创建一个标题：“地下蔬菜”
创建一个列表来存放地下蔬菜
将标题和列表添加到文档中
为“地上蔬菜”创建第二个标题，并将其添加到文档中
创建一个列表来保存地上蔬菜，并将其添加到文档中
循环查看HTML中当前存在的蔬菜，并将它们添加到相应的列表中
把蔬菜从原来的清单上去掉
完全删除原始列表
通过Markbot运行它，确保它通过所有检查

目标视觉上匹配“屏幕截图”文件夹中的图像

这就是你要找的吗

$（函数（）{
$（'body'）.prepend（'undergroundvegees）；
$（'body'）.prepend（'地上蔬菜）；
$（'ul li.below'）。附录（$（“#belowContainer”）；
$（'ul li.over'）。附于（$（“#over container”）；
});

HTML重排程序

马铃薯
萝卜
豆
胡萝卜
洋葱
玉米
番茄

我想我会这样做

//选择第一个列表
var first=$（'ul'）；
//在列表前添加h1
首先，在“地下蔬菜”之前；
//再列一份清单
var sub_ul=$（“”）；
//找到所有带有“over”的类，然后将其附加到第二个列表中
//注意：追加时会自动删除原始文件
首先，查找（'.over'）。附录（sub_ul）；
//在第一个列表之后插入新列表
首先，在（“地上蔬菜”之后，sub_ul）

HTML重排程序

马铃薯
萝卜
豆
胡萝卜
洋葱
玉米
番茄

严格遵循8个步骤时的解决方案：

//1。创建一个标题：“地下蔬菜”。
变量头1=$（“地下蔬菜”）；
// 2. 创建一个列表来存放地下蔬菜。
var list1=$（“”）；
// 3. 将标题和列表添加到文档中。
$（'body'）.append（heading1.append（list1）；
// 4. 为“地上蔬菜”创建第二个标题，并将其添加到文档中。
var heading2=$（“地上蔬菜”）；
$（'body'）。追加（标题2）；
// 5. 创建一个列表来保存地上蔬菜，并将其添加到文档中。
var list2=$（“”）；
$（'body'）。追加（列表2）；
// 6. 循环查看HTML中当前存在的蔬菜，并将它们添加到相应的列表中。
$（“ul li”）。每个（函数（）{
if（$（this）.hasClass（'below'））{
$（'ul#under#ground'）。追加（$（this.clone（））；
}以上{//else
$（'ul#over#ground'）。追加（$（this.clone（））；
}
});
// 7. 把蔬菜从原来的清单上去掉。
$（'ul'）.not（'under#u ground'）.not（'under#u ground'）.html（''）；
// 8. 完全删除原始列表。
$（'ul'）。不（'under#u ground'）。不（'under#u ground'）。删除（）

HTML重排程序

马铃薯
萝卜
豆
胡萝卜
洋葱
玉米
番茄

您正在尝试在步骤2和5之前执行步骤6。使用.each（function（）{if（$（this）.hasClass（…}）
浏览列表（步骤6）@Adder所以我可能会把自己弄糊涂，但现在它只是要求创建一个空列表，稍后我会将它们添加到各自的列表中，对吗？是的，总结一下。@Adder谢谢你的提示。这澄清了很多，给了我一个想法。我仍然需要在第6步创建一个循环，但这让我走上了正确的轨道，才能到达第6步说到点子上了。谢谢你。如果有帮助的话，我很高兴……你仍然需要实现循环，但你已经在路上了！Argh Ganov13击败了我：）
Below ground veggies

.belowPotato
.belowTurnip
.belowBean
.belowCarrot
.belowOnion
.belowCorn
.belowTomato