JQuery select parent 基于包含精确文本的 child

Question

我有以下问题，我似乎可以开始工作：我有一组 parent 跨度，其中包含一组不同的标签，但其中只有 1 个其他跨度包含文本。我想提取其内部跨度具有精确文本匹配的 parents！

    <span class="parent" id="1">
     <p>..</p><p>..</p>
     <span>text</span>
     <a>..</a>
    </span>
    <span class="parent" id="2">
     <span>some text</span>
     <a>..</a>
    </span>
    ....
    <span class="parent" id="n">
     <p>..</p>
     <span>other</span>
    </span>

当我搜索 "text" 时，我只想要 id == "1"

的范围

我最初的尝试包含 returns 2 个跨度 -> id == 1 和 id == 2：

var current = "text";
var element = $('.parent:contains(' + current + ')');

我也尝试过使用过滤器，依我的拙见，它应该可以工作，但没有:(

var element = $('.parent').filter(function () {
                    return ($(this).children().text()==current );
               });

或

var element = $('.parent').filter(function () {
                    return ($(this).children('span').text() == current )
               });

任何帮助将不胜感激，谢谢！

Answer 1

你可以试试：

var current = "text";
var test = $('.parent').children().filter(function() {
    return $(this).text() === current;
});

它看起来像你们中的一种解决方案，但我尝试了我的解决方案并且有效。您可以在这里尝试：https://jsfiddle.net/amwadqm3/.

Answer 2

如果您坚持使用 :contains() css 选择器，那么您的代码应该如下所示：

var contents = "test";
var element = $('.parent :contains(' + current + ')').parent();

注意 .parent 和 :contains() 之间的 space。这将分别在子元素中查找给定文本和 returns 找到它的元素。然后你必须使用 .parent() 来检索它的父元素。

但是， 如果放入 :contains() 的文本有特殊字符，这将失败。如果子文本包含给定文本但不完全匹配，它也会给出误报。

相反，我们可以使用您发布的过滤器的略微修改版本：

var current = "test";
var element = $(".parent").children().filter(function(){
    return $(this).text() == current;
}).parent();

再次注意，这会过滤父项的子项而不是父项本身。

Answer 3

您可以使用 :contains 或 filter 函数获取父元素。如果您无法使用 :contains 或 filter 函数获取父元素，您可以使用每个循环：

var content = 'test';
var element = '';

$('.parent').each(function() {
    var inner_text = $(this).find('span').text();
    if(inner_text == content) {
        element = $(this);
    }
});

JQuery select parent 基于包含精确文本的 child

JQuery select the parent based on child containing exact text

jquery

jquery-selectors