35843


お世話になります。

青いboxをクリックするたびに、  
ピンク色の要素が下に次々と挿入されるようにしたいのですが、  
２回目のクリックでうまくbefore()メソッドが働きません。（要素が挿入されません）  
どこが間違っているのでしょうか？

試しに、

[code]

    $('this').before(content)
    
[/code]

として、クリックした要素の上に挿入していくようにするとうまくいくのですが。

[![画像の説明をここに入力](https://i.stack.imgur.com/mj6dB.png)](https://i.stack.imgur.com/mj6dB.png)

[scripts.js]

[code]

    $(function(){
        var container = $('.container');
        var boxes = $('.box');
    
        //ホバー
        boxes.hover(function(){
            $(this).css('opacity','0.5')
        },function(){
            $(this).css('opacity','1.0')
            $(this).css('background','skyblue');
        });
    
        //それぞれのdivがクリックされた回数
        var countArray = [0,0,0,0,0,0,0,0,0,0];
    
        //クリック
        boxes.click(function() {
            var box = $(this);
            box.css('background','blue');
            var content = $('<div class="content"></div>');
            var index = boxes.index(this);
            var countOfClickedOnThisBox = countArray[index];
            countOfClickedOnThisBox++;
            countArray[index] = countOfClickedOnThisBox;
            content.text(countOfClickedOnThisBox+'番目のピンク要素');
            content.click(function(){
                content.remove();
                var countOfClickedOnThisBox = countArray[index];
                countOfClickedOnThisBox--;
                countArray[index] = countOfClickedOnThisBox;
            });
            var nextBox = box.next('.box');
            console.log(nextBox);
            nextBox.before(content);//$('this').before(content)だと挿入していける
            content.animate({
                width:1000,
                opacity:1.0
            });
        });
    });
    
[/code]

[HTML]

[code]

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Practice2</title>
    <link rel="stylesheet" href="RestetCSS.css">
    <link rel="stylesheet" href="styles.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="scripts.js"></script>
    </head>
    
    <body>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
        </div>
    
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-06-23T15:57:49.793
35841
2017-06-23T17:12:37.590
2017-06-23T16:39:45.110
12297
12297
question
html jquery css
jQueryで、要素の２回目のクリックでうまくbefore()メソッドが働きません。

[code]

    var nextBox = box.nextAll('.box:first');
    
[/code]

とすることで、うまくいきました！


CC BY-SA 3.0
2017-06-23T17:12:37.590
35843
2017-06-23T17:12:37.590
12297
35841
answer