1

I'm trying to write some simple jQuery to display class bl3 when class blc3 is clicked. I've got it working to show every class bl3 when a blc3 class is clicked, but I want it to open only the specific bl3 that relates to the clicked blc3.

HTML :

<div class="product pro">
    <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
    <div class="product-actions pro">
        <div class="info-block pro bl3" style="display:none;">
            <div class="product-title pro">Ships to:</div>
            <div class="product-description pro">Days:</div>
            <div class="product-sale pro">UK</div>
            <div class="product-prize pro">7</div>
            <div class="button-buy pro">Buy now</div>
            <div class="add pro">Add</div>
        </div>
    </div>
    <div class="nav titlen pro">TESTING</div>
    <div class="nav pro boxp">
        <ul>
            <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
                <br>
            </li>
            <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
                <br>
            </li>
            <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
                <br>
            </li>
            <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
                <br>
            </li>
        </ul>
    </div>
</div>

JQUERY :

$j(".blc3").click(function() {
    $j(this).parent().prev('.bl3').css('display','block');  
});

Unfortunately, this does not select the correct element.

The jQuery below works for displaying all elements with class bl3:

$j('.bl3').css('display','block');

But I want to display only the one that relates to the clicked blc3.
How to just display the one appropriate bl3?

showdev
  • 25,529
  • 35
  • 47
  • 67
user3710844
  • 89
  • 1
  • 8

1 Answers1

5

I suggest the jQuery selector below. For each .blc3 that is clicked, it looks for the parent div.product and then searches for a .bl3 in that element.

$('.blc3').on('click',function(){
    $(this).closest('div.product').find('.bl3').show();
});

Documentation: closest(), find()

Test below:

$('.blc3').on('click', function() {
  $(this).closest('div.product').find('.bl3').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product pro">
  <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
  <div class="product-actions pro">
    <div class="info-block pro bl3" style="display:none;">
      <div class="product-title pro">Ships to:</div>
      <div class="product-description pro">Days:</div>
      <div class="product-sale pro">UK</div>
      <div class="product-prize pro">7</div>
      <div class="button-buy pro">Buy now</div>
      <div class="add pro">Add</div>
    </div>
  </div>
  <div class="nav titlen pro">TESTING</div>
  <div class="nav pro boxp">
    <ul>
      <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
        <br>
      </li>
      <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
        <br>
      </li>
      <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
        <br>
      </li>
      <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
        <br>
      </li>
    </ul>
  </div>
</div>

<div class="product pro">
  <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
  <div class="product-actions pro">
    <div class="info-block pro bl3" style="display:none;">
      <div class="product-title pro">Ships to:</div>
      <div class="product-description pro">Days:</div>
      <div class="product-sale pro">UK</div>
      <div class="product-prize pro">7</div>
      <div class="button-buy pro">Buy now</div>
      <div class="add pro">Add</div>
    </div>
  </div>
  <div class="nav titlen pro">TESTING</div>
  <div class="nav pro boxp">
    <ul>
      <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
        <br>
      </li>
      <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
        <br>
      </li>
      <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
        <br>
      </li>
      <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
        <br>
      </li>
    </ul>
  </div>
</div>
showdev
  • 25,529
  • 35
  • 47
  • 67
  • You are my hero (today-) ! Many thanks.. One question which bugs still bugs me.. Why does my selector not works ? – user3710844 Dec 12 '14 at 19:37
  • 1
    Yours doesnt work because `parent().prev()` is null. Parent is `ul` – NorCalKnockOut Dec 12 '14 at 19:38
  • Yes, like NorCalKnockOut said, [`parent()`](http://api.jquery.com/parent/) selects only the immediate parent. Also, [`prev()`](http://api.jquery.com/prev/) selects only the immediately preceding element. – showdev Dec 12 '14 at 19:41
  • Is there anyway to see what value it is or to see what the selector contains ? I hope you understand my question. Like vardump($jqueryselector). – user3710844 Dec 12 '14 at 19:42
  • That would make it easier for me as a newbie to find the solution myself. Then I could have seen it did not contain class bl3. – user3710844 Dec 12 '14 at 19:43
  • You can check the [`length`](http://api.jquery.com/length/) of your selection. If it's zero, that element doesn't exist. `$(this).parent().prev('.bl3').length == 0`. [Here's an example](http://jsfiddle.net/Lue5s91w/). – showdev Dec 12 '14 at 19:48
  • Could I also done this by using CSS ? For example .blc3:hover > .bl3 { display:block;} ? Thank you. – user3710844 Dec 12 '14 at 21:13
  • Not unless you restructure your HTML. The traversal from `.blc3` to `.bl3` is currently too complex for CSS. Specifically, there is [not yet a "parent" selector in CSS](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). – showdev Dec 12 '14 at 21:56