Jquery 如何将直接包含文本但不包含其父元素的元素作为目标？

我想选择包含文本的元素，而不考虑其类型。我不想选择他们的上升点。我试过这个$：包含“黄昏”。css“左边框”，“1px纯紫色”；但这会选择带有文本的元素以及dom树上的祖先元素

下面是一些HTML示例。我只想选择标有的，没有别的。我该怎么做

<div>                                       <!-- no -->
    <h1>Magical ponies</h1>                 <!-- no -->
    <ul>                                    <!-- no -->
        <li>Fluttershy</li>                 <!-- no -->
        <li>Pinkie pie</li>                 <!-- no -->
        <li>Twilight sparkle</li>           <!-- THIS -->
        <li>Hurdurrdurr</li>                <!-- no -->
    </ul> 
</div>
<div>Twilight is a movie too</div>          <!-- THIS -->
<p>Hurr                                     <!-- no -->
    <span>Twilight ZONE</span>              <!-- THIS -->
Durr</p>

---

这里有一个JSFIDLE可以使用：-我特别希望解决方案是jquery而不是原生JS。

我看到的唯一解决方案是：

$("*").filter(function(){
    return $(this).clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text() //get the text
    .indexOf("Twilight") >= 0;
}).css('border-left', '1px solid purple');

我从这里获取了过滤器函数体：

问题是contains选择器使用文本jQuery函数返回元素后面的所有内容并剥离html标记。这就是为什么您必须以编程方式执行此操作，jQuery没有函数或选择器，只返回嵌套子级中没有的文本

---

您应该在开头更改$*选择器

我看到的唯一解决方案是：

$("*").filter(function(){
    return $(this).clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text() //get the text
    .indexOf("Twilight") >= 0;
}).css('border-left', '1px solid purple');

我从这里获取了过滤器函数体：

问题是contains选择器使用文本jQuery函数返回元素后面的所有内容并剥离html标记。这就是为什么您必须以编程方式执行此操作，jQuery没有函数或选择器，只返回嵌套子级中没有的文本

---

您应该在开头更改$*选择器

嗯，这差不多是我放弃之前所能做的了。不知道为什么，但是jQuery并不关心.not选择器是否存在

var e = $(document);   
e.find("*").css('border-left', '1px solid purple');
var val = e.not(':contains("Twilight")');
val.css('border-left', '7px solid red');

---

这是一个。

好吧，这是我放弃之前所能做的。不知道为什么，但是jQuery并不关心.not选择器是否存在

var e = $(document);   
e.find("*").css('border-left', '1px solid purple');
var val = e.not(':contains("Twilight")');
val.css('border-left', '7px solid red');

---

这里有一个。

请在以下人员的帮助下进行检查：

我在一个稍有不同的HTML版本上测试了它，该版本包含另一个用例：它不假设文本是子体列表中的最后一个节点，而是考虑了存在于文本/CDATA旁边的兄弟节点

哦，作为奖励，您可以使用正则表达式，并且不必通过复制节点来消耗更多内存——这只是遍历

和最新的小提琴：

关于下面关于双重应用/检查的评论-在这种情况下，如果匹配的元素包含另一个匹配的元素，则两者都将应用css-这将确保只有相对最上面的匹配可以使用一些清理：

var v = $('*').contents().filter(function(){
    return this.data && this.data.match(/Twilight/g);
}).parent();
v.children().each(function(){
    v = v.has(this)?v.not(this):v; // meh, modifies the original, w/e
});
v.css('border-left', '1px solid purple');

---

此版本解决方案的提琴：

请在以下人员的帮助下进行检查：

我在一个稍有不同的HTML版本上测试了它，该版本包含另一个用例：它不假设文本是子体列表中的最后一个节点，而是考虑了存在于文本/CDATA旁边的兄弟节点

哦，作为奖励，您可以使用正则表达式，并且不必通过复制节点来消耗更多内存——这只是遍历

和最新的小提琴：

关于下面关于双重应用/检查的评论-在这种情况下，如果匹配的元素包含另一个匹配的元素，则两者都将应用css-这将确保只有相对最上面的匹配可以使用一些清理：

var v = $('*').contents().filter(function(){
    return this.data && this.data.match(/Twilight/g);
}).parent();
v.children().each(function(){
    v = v.has(this)?v.not(this):v; // meh, modifies the original, w/e
});
v.css('border-left', '1px solid purple');

---

这个版本的解决方案的提琴：

如果父对象和子对象都包含暮光之城，则此选项将不起作用。但仍然是一个好主意，我们可以考虑使用这个递归函数。这是真的。你说得对。我试过了，但不管用我喜欢人们投反对票，但不要解释原因。这是我的最爱。我没有投反对票，但这可能是一个原因：不是所有情况下都有效！我意识到它并非在所有情况下都有效，这是通过评论确定的，尽管它确实回答了OP给出的问题，这意味着它不是一个无用的问题，正如否决票所暗示的那样，它只是不完美。我本打算研究一个更合适的解决方案，但我已经放弃了。遗憾的是，即使是这个社区也有巨魔：\n如果父母和孩子都有《暮光之城》，这就行不通了。但仍然是一个好主意，我们可以考虑使用这个递归函数。这是真的。你说得对。我试过了，但不管用我喜欢人们投反对票，但不要解释原因。这是我的最爱。我没有投反对票，但这可能是一个原因：不是所有情况下都有效！我意识到它并非在所有情况下都有效，这是通过评论确定的，尽管它确实回答了OP给出的问题，这意味着它不是一个无用的问题，正如否决票所暗示的那样，它只是不完美。我本打算研究一个更合适的解决方案，但我已经放弃了。遗憾的是，即使这个社区也有巨魔：\n有些解决方案使用*或没有与*相同的选择器。您应该尝试将其更改为某些元素。如果您知道它总是一个div、li或p，请选择类似$'p.div.li'：filter'selectorHere'这样的选项。这会加快速度，通配符选择器很慢。你需要逗号来分隔可能的标记。现在你只是一个普通人

---

引用

元素，该元素很可能不会返回任何结果。某些解决方案使用*，或不使用与*相同的选择器。您应该尝试将其更改为某些元素。如果您知道它总是一个div、li或p，请选择类似$'p.div.li'：filter'selectorHere'这样的选项。这会加快速度，通配符选择器很慢。你需要逗号来分隔可能的标记。现在您只是引用了一个

元素，它很可能不会返回任何结果。如果您在div中嵌套带有曙光的div，它将对它们进行双重检查，否则这是一个可靠的答案。@Agony双重检查有什么错？从技术上讲，他们都有一个与搜索条件匹配的直接文本后代。我个人没有发现双重检查有任何错误，我只是告诉你：@Agony在那里。现在没有重复检查！>。如果你在div中嵌入了曙光，它会再次检查它们，否则这是一个可靠的答案。@Agony再次检查它们有什么错？从技术上讲，他们都有一个与搜索条件匹配的直接文本后代。我个人没有发现双重检查有任何错误，我只是告诉你：@Agony在那里。现在没有重复检查！>。