选择不在锚点中的跨度

Posted 2023-05-09

【中文标题】选择不在锚点中的跨度

【英文标题】：Select spans not in an anchor

【发布时间】：2014-12-18 17:05:03

【问题描述】：

<span>Item 1</span>
<span>Item 2</span>
<a href="#"><span>Item 3</span></a>
<span>Item 4</span>
<a href="#"><span>Item 5</span></a>
<span>Item 6</span>

我将使用什么选择器之王来选择未包含在锚标记中的跨度（在本例中为项目 1、2、4 和 6。

【问题讨论】：

有几种不同的方法可以做到这一点，一种是.filter，例如：$('span').filter(function(i)return $(this).parent('a').length)

谢谢，这很接近，但这会返回带有锚包装器的跨度。与此相反的是什么？

@MattCoady $('span').filter(function(i)return !$(this).parent('a').length);

是的，我的错。我忘了感叹号。在我上面得到它。正如我所说，有六种或更多方法。甚至.not

【参考方案1】：

jQuery 主要使用 css 选择器，而在 css 中我不认为有任何“父选择器”。但是，您可以在 jquery 的帮助下使用 css 选择器的组合来定位不是如下锚子的spans...

$("span").not("a span");

$(function()
    $("span").not("a span").css("background-color", "red");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span>Item 1</span>
<span>Item 2</span>
<a href="#"><span>Item 3</span></a>
<span>Item 4</span>
<a href="#"><span>Item 5</span></a>
<span>Item 6</span>

【讨论】：

哦，这很简短。很好，谢谢！我将其更改为“a > span”以防止任何进一步的选择。

【参考方案2】：

下面是我的方法

var sp = $('span');
var only = [];
for (var i = 0; i < sp.length; i++) 
    if ($(sp[i]).parent('a').length === 0) 
        only.push(sp[i]);
    

console.log(only)

var sp = $('span');
var only = [];
for (var i = 0; i < sp.length; i++) 
  if ($(sp[i]).parent('a').length === 0) 
    $(sp[i]).css('background', '#ccc');
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Item 1</span>

<span>Item 2</span>

<a href="#"><span>Item 3</span></a>

<span>Item 4</span>

<a href="#"><span>Item 5</span></a>

<span>Item 6</span>