如何用jQuery包装div？

Question

我想创建一个使用PHP循环的div的滑块。我不知道将被圈出的div的数量，所以我试图找出如何制作一个滑块。

我不想复制/粘贴整个循环。因此，在本QA /示例中，我将使用图像和代码示例。

让我们说我的输出看起来像这样。黑色边框是可见屏幕区域。并且红色与php循环中的div相邻。这个div在容器package testExcelAuth; import java.io.File; import java.net.URL; import java.util.ArrayList; import java.util.List; import com.google.gdata.client.spreadsheet.SpreadsheetService; import com.google.api.client.googleapis.auth.oauth2.GoogleCredential; import com.google.api.client.http.javanet.NetHttpTransport; import com.google.api.client.json.jackson2.JacksonFactory; import com.google.gdata.data.spreadsheet.SpreadsheetEntry; import com.google.gdata.data.spreadsheet.SpreadsheetFeed; import com.google.api.services.drive.DriveScopes; public class testExcelAuth { public static void main(String[] args) throws Exception { ArrayList scopes = new ArrayList(); scopes.add(0, DriveScopes.DRIVE); scopes.add(1, "https://spreadsheets.google.com/feeds"); GoogleCredential credential = new GoogleCredential.Builder() .setTransport(new NetHttpTransport()) .setJsonFactory(new JacksonFactory()) .setServiceAccountId("rkulkarni@securet.in") .setServiceAccountPrivateKeyFromP12File(newFile( ".\\src\\testExcelAuth\\key.p12")) .setServiceAccountScopes(scopes).build(); credential.refreshToken(); SpreadsheetService service = new SpreadsheetService("tmp"); service.setOAuth2Credentials(credential); // Define the URL to request. This should never change. URL SPREADSHEET_FEED_URL = new URL( "https://spreadsheets.google.com/feeds/spreadsheets/private/full"); // Make a request to the API and get all spreadsheets. SpreadsheetFeed feed = service.getFeed(SPREADSHEET_FEED_URL, SpreadsheetFeed.class); List<SpreadsheetEntry> spreadsheets = feed.getEntries(); // Iterate through all of the spreadsheets returned int i = 0; for (SpreadsheetEntry spreadsheet : spreadsheets) { ++i; System.out.println(spreadsheet.getId()); } System.out.println("Done " + i); } } 中循环。

HTML：

#container

CSS：

<div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

现在，我想创建一个在div 4中滑动4的滑块。我认为最好的方法是使用包装器对div 4by4进行分组，让它的类为.container { border: 1px solid black; width:300px; height:600px; } .item { height:100px; width: 100px; border: 1px solid red; float:right; margin:24px; } 并且将第一个除了可见屏幕区域之外的div移动到.wrapper。添加一些位置绝对值。像这样黄色边框是.absolute-pos：

CSS：

.wrapper

现在问我的问题：

我怎样才能使用jQuery。创建一个函数，在.wrapper { border: 1px solid yellow; width:100%; height:300px; } .absolute-pos { position:absolute; width:300px; top:0; left:0; margin-left:320px; margin-top:10px; } 中删除所有div，然后将div放在div #container 4by4中？并将.wrapper放在除第一个之外的所有div上（默认情况下应该可见）？

这是一个包含所有示例CSS和示例“loop”的jsfiddle：http://jsfiddle.net/8k95ktwk/

编辑：要明确问题，这就是我要问的问题：  1.如何将.absolute-pos类的父div添加到.wrapper div 4by4？  2.如何将课程.item添加到所有.absolute-pos div，但不是第一个？

Answer 1

您可以创建一个以4为增量的for循环，然后使用.wrapAll()函数进行换行。

var divs = $(".item");
for (var i = 0; i < divs.length; i += 4) {
    divs.slice(i, i + 4).wrapAll("<div class='wrapper'></div>");
}

$(".wrapper:not(:first)").each(function(){
    $(this).addClass('absolute-pos');
});

看看这个JSFIDDLE

Answer 2

在此小提琴中使用float: left：http://jsfiddle.net/8k95ktwk/1/。

Answer 3

根据需要更新小提琴。使用.clone()来实现它

http://jsfiddle.net/8k95ktwk/7/