查找父母的前兄弟姐妹的子级(其中任何一个)是否包含特定文本

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在这里）：

$('.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 + '"');
    }
});

与其附加到 body，不如给你的 ul 元素一个 ID 并附加到那里，就像我在这个 jsfiddle 中所做的那样。

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