CODEWITHSUNDEEP
jqueryloops
batmaniac7
batmaniac7

Reputation: 422

jquery loop for div

I have the following code in repeat. 

<div class="background1"></div>

 <i class="fa fa-share" alt="share"  title="Share"></i>
 <div class="large1">
      <div class="ttip">
          <div>Here goes contents...</div>
              <span class="note">(click here to close the box)</span>
      </div>
 </div>

I want to display the div with class large1 and the background. This is the code (not mine. found it on net) in repeat.

I tried to do the following in java-script

$('.fa-share').click(function (){
                    $(this).next(".large1").first().html(function() {
                                $(this).prev(".background1").css({"opacity": "0.3"}).fadeIn("slow");
                                $(this).next('.ttip').css({left: $(this).position() + '20px',top: $(this).position() + '50px'}).show(500)
                    }).fadeIn("slow");

                    $(this).next('.note').on('click', function() {
                        $(this).prev('.ttip').hide(500);
                        $(this).prev(".background1").fadeOut("slow");
                        $(this).prev(".large1").fadeOut("slow");
                    });
                });

I had tried using ".each()" on first click but did not work. Thanks in advance.

Upvotes: 0

Views: 59

Answers (2)

batmaniac7
batmaniac7

Reputation: 422

NVM I got it working. Thanks all of you.

$('.fa-share').click(function (){
                        $(this).prev(".background1").css({"opacity": "0.3"}).fadeIn("slow");
                        $(this).next(".large1").html(function() {$('.ttip').css({left: $(this).position() + '20px',top: $(this).position() + '50px'}).show(500)
                        }).fadeIn("slow");
                    });
                $('.note').on('click', function() {
                    $(this).closest('.ttip').hide(500);
                    $$(this).closest(".large1").prev(".fa-share").prev(".background1").fadeOut("slow");
                    $(this).closest(".large1").fadeOut("slow");
                });

Upvotes: 1

Marek Woźniak
Marek Woźniak

Reputation: 1786

it may help you:

    $(document).ready(function () {
        $('.fa-share').on('click', 'a.note', function (event) {
            event.stopPropagation();
            event.preventDefault();
            $('.large1').fadeIn();
            $('.background1').fadeIn();
        });

        $('.large1').on('click', 'span.note', function () {
            $(this).closest('.large1').fadeOut();
            $('.background1').fadeOut();
        });
    });

<div class="background1" style="display:none;">
    <p>here's some text</p>
</div>

<i class="fa fa-share" alt="share" title="Share">
    <a href="#" class="note">click to show large1 and background1</a>
</i>
<div class="large1" style="display:none;">
    <div class="ttip">
        <div>Here goes contents...</div>
        <span class="note">(click here to close the box)</span>
    </div>
</div>

P.S I think that you don't have any base knowledge about jquery and javascript. I'm suggesting you that look at this page: https://www.codeschool.com/courses/try-jquery and learn with this course. It will give you a lot knowledge about basic level for js/jquery. (If the upper link will don't work search on google: codeschool tryjquery course free basic level 1)

Upvotes: 0

Related Questions