查找父母的上一个兄弟姐妹的孩子（其中任何一个）是否包含特定文本

Question

我有这个 html：

<ul>
  <li id="JL20211" data-fruit-types="Apples, Oranges, Bananas">
    <div class="sm-content">
        <div class="row">
            <div class="large-12 columns" >
                <div  class="post">
                    This a post with some information about delicious fruit.
                </div>
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <div class="action-row">
                    <div class="tags">
                        <a class="tag">Apples</a>
                        <a class="tag">Orange</a>
                        <a class="tag">Bananas</a>
                    </div>
                    <div class="right">
                        <a><span class="id">ID: Fruit 1</span></a>
                        <a class="button tiny share">Share</a>
                    </div>
                </div>
             </div>
        </div>
    </div>
 </li>
 <li id="JL20211" data-fruit-types="Apples, Bananas, Pineapples">
    <div class="sm-content">
        <div class="row">
            <div class="large-12 columns" >
                <div  class="post">
                    This another post with some information about delicious fruit.
                </div>
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <div class="action-row">
                    <div class="tags">
                        <a class="tag">Apples</a>
                        <a class="tag">Bananas</a>
                        <a class="tag">Pineapples</a>
                    </div>
                    <div class="right">
                        <a><span class="id">ID: Fruit 2</span></a>
                        <a class="button tiny share">Share</a>
                    </div>
                </div>
             </div>
        </div>
    </div>
 </li>
</ul>

我目前有这个 jQuery (jsfiddle here)：

$('.share').click(function(){
    var postText = $(this).closest('.row').prev('.row').find('.post').html();       
    if($(this).parent().prev().find('.blerp')){
        console.log('This version should not show up!');
    }else{
        console.log(postText);
    }
}); 

最终，我试图找出 .share 的 parent 的 sibling 的 children contain 的文本。所以基本上，我想知道.share 按钮最接近的<a class="tag"> 是否包含一个特定的词，比如“橙色”。在小提琴中，您可以看到，在尝试查找父母的前一个兄弟姐妹是否有一个特定班级的孩子时，我什至无法让它记录正确的单词。 blerp 类在我的代码中的任何地方都不存在，但它继续记录内容，就好像它存在一样。

我尝试了多个 jQuery 标签，例如：

$(this).parent().siblings('.tags').find('.tag')
$(this).parent().siblings('.tags').children('.tag')
$(this).parents('.action-row').find('.tags > .tag')
$(this).closest('.action-row').find('.tags > .tag')
$(this).closest('.right').prev('.tags).find('.tag')

这只是其中的一部分，如有必要，我可以列出更多变体。我开始试图弄清楚如何让:contains 处理这个长期混乱的问题，然后意识到我在到达那里之前就遇到了问题。有什么帮助吗？

Answer 1

你在正确的轨道上。您还可以通过仅附加一次而不是使用 share 类附加到每个元素来使函数的性能更高一些。

根据您的 HTML，以下内容将用于确定文本是否存在：

$('body').on('click', '.share', function() {
    var text = 'Orange';
    var contains_text = $(this).closest('.action-row').find('.tag:contains(' + text + ')').length > 0;
    if (contains_text) {
        console.log('Found "' + text + '"');
    }
});

您应该给ul 元素一个ID 并附加到body 上，而不是附加到body 上，就像我在jsfiddle 中所做的那样。

旁注：您的 li 元素上有重复的 ID JL20211。