使用jquery选择嵌套列表中的所有未链接项

时间:2016-10-29 19:05:59

标签: javascript jquery

我有以下HTML

 <ul>
     <li><a ...>item 1</a></li>
     <li>item 2
          <ul>
              <li><a ...>item 2-a</a></li>
              <li><a ...>item 2-b</a></li>
         </ul>
    </li>
    <li><a ...>item 3</a></li>
    <li>item 4
          <ul>
              <li><a ...>item 4-a</a></li>
              <li><a ...>item 4-b</a></li>
         </ul>
    </li>
    <li><a ...>item 5</a></li>
    <li><a ...>item 6</a></li>
 </ul>

我想在&#39;项目2&#39;中添加一个课程。和&#39;项目4&#39; jquery使用.has但无法找到方法。

我想澄清一下我的问题: 我有一个嵌套列表,其中包含未知数量的项目,其中某些项目未链接。我想为所有不喜欢的项目添加一个类。

8 个答案:

答案 0 :(得分:2)

如果您想根据li的内容添加课程,可以使用:contains选择器:

$( "li:contains('item 2')" ).addClass('X');

或过滤并检查text()内容:

$( "li" ).filter(function(){
    return $(this).text()==='item 4';
}).addClass('X');

如果您想使用index使用.eq()添加课程,请使用Robiseb的答案节目。

编辑:

  

我不知道列表中有多少<li>没有链接。我不知道<li>内的文字是什么。

您可以使用:

$("li:not(:has(>a))").addClass('X');

希望这有帮助。

$("li:not(:has(>a))").addClass('X');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a ...>item 1</a></li>
  <li>item 2
    <ul>
      <li><a ...>item 2-a</a></li>
      <li><a ...>item 2-b</a></li>
    </ul>
  </li>
  <li><a ...>item 3</a></li>
  <li>item 4
    <ul>
      <li><a ...>item 4-a</a></li>
      <li><a ...>item 4-b</a></li>
    </ul>
  </li>
  <li><a ...>item 5</a></li>
  <li><a ...>item 6</a></li>
</ul>

答案 1 :(得分:1)

尝试使用.eq() documentation

$('li').eq(1).addClass('yourClass');

小心,eq开始为0

答案 2 :(得分:1)

根据评论,您要检查是否有子var app = require('express')(); var http = require('http').Server(app); var express = require('express'); app.use(modify); app.use(express.static('./files')); function modify(req, res, next){ res._send = res.send res.send = function(a) { a = a.replace('a', 'b'); return res._send(a); } next(); } http.listen(process.env.port, function () { console.log('listening on *:' + process.env.port); });

<ul>

答案 3 :(得分:1)

仅选择没有锚点的列表项,如问题评论中所阐明的那样。

var parentList = $('ul'); // something more specific is assumed.
parentList.children('li').children().not('a').parent().addClass('some-class');

使用&#34;包含&#34;使解决方案依赖于内容,而不是结构。使用&#34; eq&#34;或类似的&#34; nth&#34;类似的功能假设给定的例子是唯一的结构,而我认为它被计划为生成的代码可以延伸到更长的长度,但将始终保持结构定义摘录。

答案 4 :(得分:0)

id

答案 5 :(得分:0)

您可以使用:contains()选择器

按内容选择项目

有关详情:https://api.jquery.com/contains-selector/

示例:http://jsbin.com/nutekaxora/edit?html,css,js,output

$("li:contains('Item 1')").addClass('myClass');

答案 6 :(得分:0)

可能不是最好的方法,但使用&#34; eq&#34;方法。

var first = $("ul").first();

$(first).find("li").eq(1).addClass("newClass"); /// This selects the second list item
$(first).find("li").eq(5).addClass("newClass"); // This selects the sixth list item

这里有一支笔可以让它显示出来。 http://codepen.io/raghavkanwal/pen/XjLjJM

答案 7 :(得分:0)

你的意思是检测所有的&#39; li&#39;与&#39; ul&#39;作为一个孩子? https://jsfiddle.net/Ln3kt6ya/

这个例子可以帮助你吗?

$('li').has('ul').addClass('error');