1

我有以下标记：

<div id="breadcrumbs">
  <ul>
   <li><span class="crumblink"><a href="/">Home</a></span></li>
   <span class="arrows"> »</span>  
   <li><span class="crumblink"><a href="/locations-brands">Publishing Regions</a></span></li>
   <span class="arrows"> »</span>  
   <li><span class="crumblink"><a href="/locations-brands/publications">Locations &amp; Brands</a></span></li>
   <span class="arrows"> »</span>
   <li><span class="crumblink"><a href="/locations-brands/publications/popupbrand">Publications</a></span></li>
   <span class="arrows"> »</span>  
  </ul>
</div>

如何删除<li>if 具有字符串“Publications”及其下一个span.arrows？

4

2 回答 2

5

有几种方法可以做到这一点，但一种是使用$()选择器来查找lis，然后遍历它们（each()很方便）使用text()来获取它们的文本，String#indexOf检查内容，并next()查看下一件事是否是一个相关的跨度（但请参阅下面的注释），当然remove()要删除一个元素。

选择lis 时，可以使用 jQuery 添加的特殊:contains("text")选择器，但请注意，如果这样做，则意味着 jQuery 无法使用浏览器内置的工具来查找元素，因此可能会影响性能。

请注意，您的 HTML 无效。ul元素 不能有span子元素；元素的唯一有效直接子ul元素是li元素spans（如果您愿意，可以在其中包含）。当您发送这样的无效标记时，浏览器会做什么将取决于浏览器。

于 2012-04-26T10:22:34.470 回答
2

试试这个：

$('#breadcrumbs li:contains("Publications")')  
     /* find li node containing Publications */
  .next('span').remove().end()                
     /* search next span and remove it */
  .remove();                                   
     /* end() reset last selection (made with next()), so last remove() is removing the li */

小提琴示例：http: //jsfiddle.net/MZysf/

于 2012-04-26T10:22:43.700 回答