Найти, если дети Родитель в предыдущий родственный (в любой из них) содержат определенный текст

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); 
    } 
}); 

В конце концов, я я пытаюсь выяснить, .shareparentsiblingchildrencontain текст. Итак, в основном, я хочу знать, содержит ли ближайшая .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 элементу идентификатор и прикрепить там, как я сделали это в этом jsfiddle.

Сторона заметки: У вас есть дубликат ID JL20211 на ваших li элементов.