Question

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flickr Feed</title>
    <link href="../_css/site.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        .image {
            float: left;
            padding: 10px;
            border: solid 1px rgb(27,45,94);
            background-color: white;
            margin: 0 30px 30px 0;
        }
        .image:hover {
            border-color: red;
            background-color: rgb(204,204,204); 
        }

        img{
            max-width: 100%;
            height:auto;
            display: block;
        }

        header{
            z-index: 9999;
        }
    </style>
    <script src="../_js/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
            var searchInfo = {
                id : "113158794@N07",
                format : "json"
            }

            $.getJSON(url,searchInfo,function(data){
                $("h1").text(data.title);
                var photoHTML = '';
                $.each(data.items,function(i,photo){
                    photoHTML += '<div class="col-sm-6 col-md-4 col-lg-3">';
                    photoHTML += '<a href="' + photo.link +'">';
                    photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '">';
                    photoHTML += '<p>' + photo.title + '</p></a></div>';
                });
                $('#photos').append(photoHTML);
            }); 
        }); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <header>
            JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
        </header>
        <div class="content">
            <div class="main">
                <h1>Flickr Images</h1>
                <div id="photos"></div>
                <br class="clearLeft">
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>
</body>
</html>

我喜欢在（$ .getJSON（url，searchInfo，function（data）{）部分使用第n个：子选择器，我可以在某个时候清除浮点数。

Answer 1

w3schools说

：nth-child（2）选择器：为每个父元素的第二个子元素指定规则：

所以如果你使用基于图像容器的通用选择器

.imageContainer .images:nth-child(3){clear:left;}

然后你应该可以在不使用任何javascript的情况下应用你的css规则。

虽然，只是关注问题而不是解决方案，你真的只想要一种方法来选择每个X图像。为此，您首先需要.each循环中当前位置的索引，您已经在＆＃34; i＆＃34;就在光变量之前。

$.each(data.items,function(i,photo){

现在我们使用＆＃34;％＆＃34;模块化运算符，用于计算此当前索引是否为例如第三个＆＃34; index（3,6,9,12,15 ...）并获得一个if-test，你可以在.each（）循环中放置你需要的地方。

    if(i % 3 == 0){
      //do stuff, like add a particular class
      photoHTML += '<a class="particularClass" href="' + photo.link +'">';
    }

编辑！如果您在初始页面加载后动态添加图像，那么检查.each（）循环中的索引不会产生想要的结果。我建议将if-check更改为

 if(i % Document.getElementsByClassName('images').length == 0)

测试图像的总量，然后包括已存在的图像。只有在您使用课程“图像”的地方只有一个地方才能使用此课程。

Answer 2

您不需要直接在HTML中清除，您可以设置当前HTML的样式。

#photos > div:nth-child(3n):after {content: ''; display: block; clear: left;}

Answer 3

使用float：left可能在某些浏览器中不起作用，显示：inline-block更实用。您必须阅读以下文章：float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

如果您要使用display：inline-block，则不需要任何n-child方法。

我如何使用nth：child选择器与json的json的每个函数

3 个答案: