«этот» селектор не соответствует элементам в функции

Question

Здравствуйте, у меня есть следующая проблема. У меня есть 3 коробки divs с новостями. Я поместил диапазон с текстом с свойством hide(), поэтому, когда нажата кнопка «Просмотреть больше», чтобы определить, какая кнопка этих трех ящиков нажата, а также slideToggle() скрытый текст. Я попытался назначить каждую кнопку переменной и каждый span - это работает (НО ЕГО ПУТЬ СЛИШКОМ ПЕЧАТИ И МЕДЛЕННО). Но когда Ive пробовал с селектором this (для более быстрого воспроизведения и не так повторяющегося кода), он терпит неудачу. I`ll разместить код ниже:

JSFIDDLE ЗДЕСЬ https://jsfiddle.net/q0tzjpy3/

Jquery:

//WORKS 
var $span = $('span')[0],$span2 = $('span')[1] ,$span3 = $('span')[2]; 
     var $button = $('button')[0] , $button2 = $('button')[1],$button3 = $('button')[2]; 

     $('span').hide(); 
     $($button).click(function(){ 
     $($span).slideToggle('fast'); 
     }); 

     $('span').hide(); 
     $($button2).click(function(){ 
     $($span2).slideToggle('fast'); 
     }); 

     $('span').hide(); 
     $($button3).click(function(){ 
     $($span3).slideToggle('fast'); 
     }); 
//DOESNT WORK 
$(this).find('button').click(function(){ 
     $(this).find('span').slideToggle(); 
     }); 

HTML:

<div class="holder"> 
       <div> 
        <h2>Blah</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p> 
        <button>Click to see more</button> 
       </div> 
       <div> 
        <h2>Blah</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p> 
        <button>Click to see more</button> 
       </div> 
       <div> 
        <h2>Blah</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p> 
        <button>Click to see more</button> 
       </div> 
      </div> 

CSS:

.holder{ 
    width:80%; 
    margin: 0 auto; 
    text-align: center; 
} 


.holder div{ 
    width:25%; 
    vertical-align: top; 

    border:1px solid black; 

    display:inline-block; 
    padding:20px; 
} 

button{ 
    padding:10px 20px 10px 20px; 
    background-color:red; 
    color:#ffffff; 
    border:1px solid #000000; 

    cursor:pointer; 
    transition:background 0.4s , color 0.5s; 
} 

button:hover{ 
    border:1px solid #000000; 

    background-color:#ffffff; 
    color:red; 

} 

Answer 1

$('button').click(function() { 
    $(this).prev().find('span').slideToggle(); //span is descendant of p which is previous of button 
}); 

Применение .prev()

Описание: Получить непосредственно предшествующий одноуровневый каждого элемента в наборе соответствующих элементов. Если предусмотрен селектор, он извлекает предыдущий брат, только если он соответствует этому селектору.

После этого использования .find()

Описание: Получить потомков каждого элемента в текущем наборе соответствующих элементов, фильтруют с помощью селектора, объект JQuery, или элемент.

DEMO

Answer 2

Изменить Jquery для followi нг:

$('span').hide(); 
$('button').click(function(){ 
    $(this).parent().find('span').slideToggle(); 
}); 

Working Fiddle