jquery loop for div

Question

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.

.large1 is not a child of your i - instead of find try .next(".large1") — tymeJV
– tymeJV, Commented Sep 30, 2014 at 23:55
.next searches for siblings right? But in my case those are not siblings. — batmaniac7
– batmaniac7, Commented Oct 1, 2014 at 0:01
Also $(this).closest(".background1") won't work. .background1 should be a parent for $(this) element. — Anarion
– Anarion, Commented Oct 1, 2014 at 0:04

batmaniac7 · Accepted Answer · 2014-10-01 01:05:48Z

1

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

edited Oct 1, 2014 at 1:05

answered Oct 1, 2014 at 0:59

batmaniac7

4225 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marek Woźniak · Accepted Answer · 2014-10-01 00:30:37Z

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)

Collectives™ on Stack Overflow

jquery loop for div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related