我有这个代码,我想弄清楚。基本上我需要的是只切片或复制列表中Program 1
,Program 2
,Program 3
和Program 4
的父元素,而不包括子元素。
我似乎无法在我的问题中找到答案,我相信你无法使用jQuery获取特定元素slice
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
<a href="/programs">Programs</a>
<ul>
<li>
<a href="#">Programs 1</a>
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
<a href="#">Programs 2</a>
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
<a href="#">Programs 3</a>
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
<a href="#">Programs 4</a>
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
答案 0 :(得分:1)
对您的代码进行以下更改:
将nonDegList
更改为:nonDegList = $('li a', nonDegMenu)
现在您可以将course
添加到items
,如下所示:items.append(course)
见下面的演示:
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li a', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList;
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>
<a href="/programs">Programs</a>
<ul>
<li>
<a href="#">Programs 1</a>
<ul>
<li>Sub Programs A</li>
<li>Sub Programs B</li>
<li>Sub Programs C</li>
<li>Sub Programs D</li>
</ul>
</li>
<li>
<a href="#">Programs 2</a>
<ul>
<li>Sub Programs E</li>
<li>Sub Programs F</li>
<li>Sub Programs G</li>
<li>Sub Programs H</li>
</ul>
</li>
<li>
<a href="#">Programs 3</a>
<ul>
<li>Sub Programs I</li>
<li>Sub Programs J</li>
<li>Sub Programs K</li>
<li>Sub Programs L</li>
</ul>
</li>
<li>
<a href="#">Programs 4</a>
<ul>
<li>Sub Programs M</li>
<li>Sub Programs N</li>
<li>Sub Programs O</li>
<li>Sub Programs P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
答案 1 :(得分:1)
我正在寻找一种方法,可以输出或获得第一级列表,即程序1,程序2,程序3和程序4,但不包括其中的子列表或子元素。
由于您似乎对文本“即程序1 ...”感兴趣并且不需要项目本身,您可以使用以下内容将这个“第一级”列表提取到数组中:
var list = $("#header>ul>li>ul>li>a").map(function() {
return $(this).text();
}).get()
(这对我来说似乎是第二级,因为第一级是#header>ul>li>a
,只给出程序。
通常最好添加类或不同的<h1> <h2>
级别,这样可以使项目更容易找到并且不那么脆弱,但是(根据评论)这不是一个选项。
然后,您可以根据需要使用.slice
。如果你需要第一个,那就是:
list.slice(0,1);
这与:
相同list[0];
请注意.slice(0)
将返回所有项目,因此无效。省略第二个参数提取序列的末尾(arr.length
)。
如果您需要链接本身(整个节点,而不仅仅是文本),那么就不需要地图了:
var list = $("#header>ul>li>ul>li>a");
items.append(list);
.slice的目的是例如我想要项目2,程序3和程序4.从列表中排除程序1
您可以使用正确的参数对jquery数组使用.slice
。
要排除第一个(请参阅代码段以获取此示例):
list.slice(1);
获得前2项:
list.slice(0,2)
有关切片的更多信息:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
//var list = $("#header>ul>li>ul>li>a").map(function() { console.log($(this).text()); return $(this) }).get()
var list = $("#header>ul>li>ul>li>a")
$("#course").append(list.slice(1))
#course a { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<hr/>
<div id='course'></div>
<hr/>
<div id="header">
<ul>
<li>
<a href="/programs">Programs</a>
<ul>
<li>
<a href="#">Programs 1</a>
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
<a href="#">Programs 2</a>
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
<a href="#">Programs 3</a>
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
<a href="#">Programs 4</a>
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>