选择不在锚点中的跨度答案

【问题标题】：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

标签： javascript jquery jquery-selectors css-selectors selector

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

【讨论】：