使用 jquery slice 仅获取父元素答案

【问题标题】：Using jquery slice to get parent elements only使用 jquery slice 仅获取父元素
【发布时间】：2017-10-04 11:17:49
【问题描述】：

我有这段代码，我想弄清楚。基本上我需要的是只切片或复制列表中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>

【问题讨论】：

您能提供您期望的结果吗？看起来你只是想要course = nonDegList.first()
您想删除 4 个<ul> 但保留<li>？
@freedomn-m 我正在寻找一种方法来输出或获取第一级列表，即 Program 1、Program 2、Program 3 和 Program 4，但不包括子列表或其中的子元素
你能改变html吗？给你想要的一个特定的类（所有相同的类）并将其用作选择器。
不清楚您在这里尝试使用.slice 做什么。你想得到第一个项目吗？所有的项目？似乎没有用，也没有必要。如果您要查找单个项目，则需要指定第二个参数.slice(0,1)

标签： javascript jquery html list jquery-selectors

【解决方案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>

【讨论】：

如果子菜单或子列表有锚元素，我相信它们也会被包含进来
@clestcruz 将您的选择器更改为$('#header a[href$="/programs"] + ul > li > a')
$('#header a[href$="/programs"] + ul > li > a ' ).next().clone()

【解决方案2】：

我正在寻找一种方法来输出或获取第一级列表，即 Program 1、Program 2、Program 3 和 Program 4，但不包括其中的子列表或子元素。

您似乎对“这是程序 1..”的文本感兴趣并且不需要项目本身，您可以使用以下方法将列表的“第一级”提取到数组中：

var list = $("#header>ul>li>ul>li>a").map(function() { 
                     return $(this).text(); 
                }).get()

（这对我来说似乎是第二级，因为第一级是#header>ul>li>a，只提供程序）。

通常最好添加类或不同的<h1> <h2> 级别，这将使查找项目更容易且不那么脆弱，但是（根据 cmets）这不是一个选项。

然后您可以根据需要使用.slice。如果你需要第一个，那就是：

list.slice(0,1);

这将与以下内容相同：

list[0];

请注意，.slice(0) 将返回所有项目，因此无效。省略第二个参数将提取到序列的末尾 (arr.length)。

如果您需要链接本身（整个节点，而不仅仅是其文本），则不需要地图：

var list = $("#header>ul>li>ul>li>a");
items.append(list);

.slice 的目的是例如我想要项目 Program 2、Program 3 和 Program 4。从列表中排除 Program 1

您可以使用正确的参数对 jquery 数组使用 .slice。

排除第一个（参见代码 sn-p 的工作示例）：

list.slice(1);

获取前 2 个项目：

list.slice(0,2)

//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>

【讨论】：