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根據包含精確文本的子項選擇父項

回答

相關問題