JQuery根据包含精确文本的子项选择父项

我有以下问题，我似乎可以正常工作：我有一组父级跨度包含一组不同的标记，但其中只有一个跨度内有文本。我想提取内部跨度确切的文本匹配的父母！JQuery根据包含精确文本的子项选择父项

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

当我搜索 “文本” 我只想要跨度ID = = “1”

我原来用的尝试含有回报2个跨度 - > ID == 1和id == 2：

我也试图与过滤器，这在我的愚见应该工作，但不:(

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

或

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

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

来源

2016-06-29 AdrianD

首先，作为P的块元素不应该是SPAN的子元素。如果只有一个跨度是父亲的孩子，你的第二个过滤器应该可以工作。那么也许你的浏览器解析器解析它，由于HTML标记无效 –

@ A.Wolff是对的。建议首先更正语义。 – n0m4d

我用了最后的解决方案，它对我有用。也许你的搜索文本不匹配，因为隐藏的字符。 –

你可以试试：

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

它看起来像你的解决方案之一，但我想我的，它的工作。你可以在这里试试：https://jsfiddle.net/amwadqm3/。

来源

2016-06-29 13:48:43 Powkachu

谢谢，使用你的代码片段重新运行，使我发现了错误..这是在html不在JS :( – AdrianD

好，至少你发现你的错误！:) – Powkachu

如果你是坚定的关于使用：包括（）CSS选择你的代码应该是这个样子：

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

注.parent和:contains()之间的空间。这会针对给定的文本单独查找孩子，并返回找到它的元素。然后您必须使用.parent()来检索其父元素。

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

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

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

再次注意，这个过滤器通过父，而不是父母本身的孩子。

来源

2016-06-29 14:00:45 bman

这是一个很好的解决方案，作品也！谢谢你 – AdrianD

您可以使用：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); 
    } 
});

来源

2016-06-29 14:09:35

JQuery根据包含精确文本的子项选择父项

回答

相关问题