Question

我很难搞清楚这一点，但我确信这很简单。

我知道我必须使用:nth-child来计算我想要包装的每一组元素。我想知道我将如何计算:nth-child并将所有先前的元素（包括:nth-child）包含在div中，以匹配: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>")
});

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

DEMO http://jsfiddle.net/CRz7E/1/

如果你想分别包装每个元素 - 而不是作为一个组，那么你不需要反转选择，你可以只使用.wrap()

Answer 2

嗯，有几种方法，我认为最容易想到使用.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”类将所有p元素包装在div中。当然除了 LAST 之外当然都是其中之一。

然后你可以按如下方式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方法：

将所有元素包裹起来：nth-child

2 个答案:

将所有元素包裹起来：nth-​​child

2 个答案:

将所有元素包裹起来：nth-child