0

私はこれを理解するのに苦労していますが、それは簡単だと確信しています。

:nth-childラップしたい要素のすべてのセットをカウントするために使用する必要があることを知っています。に一致する要素の各セットのdivを:nth-child含む、以前のすべての要素をどのようにカウントしてラップするのか疑問に思っています。関係者がいると思います。:nth-child:nth-child.each()

コードは次のようにレイアウトされます。

<div class="wrapper"> 
<h3>Heading</h3>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

<h3>Heading</h3>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>


<h3>Heading</h3>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>


<h3>Heading</h3>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

更新 このコードを試してみましたが、望ましい結果が得られたようですが、16で停止します。

  $(".wrapper").each( function () {
$(this).children(":lt(16)").wrapAll("<div></div>")
});
4

2 に答える 2

1

jQueryの.each()関数には組み込みがありindexます。これを利用して、16個の要素ごとに選択することができます。

$("div.wrapper").children().each(function(i){
    if(i % 16 == 0 && i != 0){
        // We get the elements we need to wrap, but they're going to be in reverse order (thanks to .prevAll())
        var elementsToWrap = $(this).prevAll().not('.wrap2');
        var temp = [];
        for(var j=0; j < elementsToWrap.size(); j++){
            // Reverse the objects selected by placing them in a temporary array.
            temp[(elementsToWrap.size()-1) - j] = elementsToWrap.eq(j)[0];
        }
        // Wrap the array back into a jQuery object, then use .wrapAll() to add a div around them
        $(temp).wrapAll('<div class="wrap2" />');
    }
});

デモ http://jsfiddle.net/CRz7E/1/

グループとしてではなく、各要素を個別にラップしたい場合は、選択を逆にする必要はなく、次のように使用できます。.wrap()

于 2012-06-12T22:14:30.223 に答える
0

いくつかの方法がありますが、私が考えることができる最も簡単な方法は.filter を使用することです。簡単な例を示します。おそらく、質問を変更して、より具体的な回答を得ることができます。

HTMLが次のような単純なものであるとします。

<body>
    <style type="text/css">
        .goober {
            background: #ffa;
            color: #696969;
        }
    </style>

    <div>1</div>
    <p>1</p>
    <div>2</div>
    <p>2</p>
    <div>3</div>
    <p>3</p>
    <div>4</div>
    <p>4</p>​
</body>

そして、クラス「goober」を使用してdiv内のすべてのp要素をラップしたいとします。もちろん最後のものを除いてすべて。

次に、次のようにjQueryを実行できます。

$(function() {
    // here i use .filter and in the return i recall the same jQuery array 
    // object that i'm filtering in order to compare the index value to 
    // its length
    $("p").filter(function(i) { 
        return i != $("p").length-1; 
    }).wrap('<div class="goober" />'); // then of course our wrapper
});​

使用されるjQueryメソッド：

于 2012-06-12T21:53:47.220 に答える