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的{{1}} parent sibling children文字。所以基本上，我想知道contain按钮最近的.share是否包含特定的单词，如“Orange”。在小提琴中你可以看到，当我试图找出父母的前一个兄弟姐妹是否有一个特定班级的孩子时，我甚至无法让它记录正确的单词。 blerp类在我的代码中不存在，但它继续记录内容，就好像它一样。

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

<a class="tag">

这只是一些，我可以在必要时列出更多变化。我开始试图找出如何让$(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')使用这个长时间的混乱，然后意识到在我到达那里之前我遇到了问题。有任何帮助吗？

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并附加到那里，而不是附加到正文，就像我在jsfiddle中所做的那样。

附注：您的JL20211元素上有一个重复的ID li。

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

1 个答案: