使用jquery slice仅获取父元素

时间：2017-08-11 06:35:38

标签： javascript jquery html list jquery-selectors

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

2 个答案:

答案 0 :(得分：1)

对您的代码进行以下更改：

  1. 将nonDegList更改为：nonDegList = $('li a', nonDegMenu)

  2. 现在您可以将course添加到items，如下所示：items.append(course)

    3. 见下面的演示：

    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>

相关问题
最新问题