查找

Question

我有這個網站：

<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的childrencontain文本。所以基本上，我想知道.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和附加在那裏，就像我已在這jsfiddle完成。

備註：您的li元素上有一個重複的ID JL20211。