"this" selector fails to match the elements in a function

Question

Hello there I have the following issue. I have 3 boxes divs with news articles. I've put a span with text with hide() property so when the button called "View More" is clicked , to detect which button of those 3 boxes is clicked and to slideToggle() the hidden text. I have tried to assign every button with a variable and every span - this works( BUT ITS WAY TOO REPETITIVE AND SLOW ) . But when Ive tried with this selector ( for faster perfomance and not so repetitive code) , it fails. I`ll post the code below:

JSFIDDLE HERE 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;

}

@RyanO'Hara I want to detect which button of those 3 is clicked. — Nasco.Chachev, Apr 15 '16 at 06:53

score 1 · Answer 1 · answered Apr 15 '16 at 06:54

1

Change Jquery to following:

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

Working Fiddle

answered Apr 15 '16 at 06:54

ketan

19,129
42
60
98

guradio · Accepted Answer · 2016-04-15T06:57:43.607

1

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

Use .prev()

Description: Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

After that use .find()

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

DEMO

edited Apr 15 '16 at 06:57

answered Apr 15 '16 at 06:54

guradio

15,524
4
36
57

@Nasco.Chachev glad it helps happy coding mate :) – guradio Apr 15 '16 at 06:57
use $('button', '.holder') ... it limits searching of buttons to descendants of the holder div ... better perf than searching the complete page for buttons. – Yoeri Apr 15 '16 at 06:58

"this" selector fails to match the elements in a function

2 Answers2