浮动项目画廊。我想在使用 jquery 的行之间添加一个 class

Question

所以我会尝试更详细地解释一下。所以我有一个画廊，其中有 9 个元素向左浮动，每行创建 3 个元素，如下所示：

    1   2   3 <--line 1

    4   5   6 <--line 2

    7   8   9 <--line 3

我想做的是，当我点击任一元素时，我想在它所在的行下方添加一个 div。例如，如果我单击元素 2，它应该在第 1 行和第 2 行之间的第 3 个元素之后添加一个 div。

我尝试选择该行的所有第 3 个元素（使用 :nth-child），但我无法让 jquery 理解它在哪一行。老实说，我真的很困惑如何处理这个问题。

任何想法都会非常有帮助。谢谢你。康斯坦丁·奇里拉

稍后编辑：代码一团糟，它是更重要的事情的一部分，对此深表歉意。

              <a href="#" class="dealer--item" data="hongkong">
                        <h4 class="dealer--item-title">Hong Kong</h4>
                    </a>

                    <a href="#" class="dealer--item" data="australia">
                        <h4 class="dealer--item-title">Sweden</h4>
                    </a>

                    <a href="#" class="dealer--item" data="sweden">
                        <h4 class="dealer--item-title">Sweden</h4>
                    </a>

                    <a href="#" class="dealer--item" data="uk">
                        <h4 class="dealer--item-title">United kingdom</h4>
                    </a>

                    <a href="#" class="dealer--item" data="germany">
                        <h4 class="dealer--item-title">Germany</h4>
                    </a>

                    <a href="#" class="dealer--item" data="netherlands">
                        <h4 class="dealer--item-title">The Netherlands</h4>
                    </a>
                    <a href="#" class="dealer--item" data="canada">
                        <h4 class="dealer--item-title">Canada</h4>
                    </a>
                    <a href="#" class="dealer--item" data="malaysia">
                        <h4 class="dealer--item-title">Malaysia</h4>
                    </a>

                    <a href="#" class="dealer--item" data="thailand">
                        <h4 class="dealer--item-title">Thailand</h4>
                    </a>
                    <a href="#" class="dealer--item" data="japan">
                        <h4 class="dealer--item-title">Japan</h4>
                    </a>
                    <a href="#" class="dealer--item" data="korea">
                        <h4 class="dealer--item-title">Korea</h4>
                    </a>
                    <a href="#" class="dealer--item" data="indonesia">
                        <h4 class="dealer--item-title">Indonesia</h4>
                    </a>
                    <a href="#" class="dealer--item" data="taiwan">
                        <h4 class="dealer--item-title">Taiwan</h4>
                    </a>

                </div>

Jquery:

$(".dealer--item").click(function (e) {
    var idSelector = $(this).attr('data');


    e.preventDefault();
    $('.dealer--item').not(this).removeClass('is-selected');
    $(this).toggleClass("is-selected");

    $(".dealer--item:nth-child(3n)").each(function (index) {
        $(this).addClass("foo" + index);
    });

    $('foo0').after($('#' + idSelector)) //this is where i lost it as its not working for other 6 elements

    $('#' + idSelector).fadeToggle(300);


});

以及需要根据点击的元素在行间添加的内容。

<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
<div class="dealer--address" id="uk">
Address here
</div>
<div class="dealer--address" id="germany">
Address here
</div>

 etc...

Answer 1

您是否考虑过在左侧浮动元素下方添加一个额外的 div 并最初使用 display:none; 隐藏它们，然后使用 jQuery 使用点击功能显示它们。

$("#clickable element").click(function(){ $("element to show").show(); });

这是我使用 jQuery 进行所有点击和显示行为的方式。

Answer 2

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .floating {
            float: left;
            width: 30%;
            margin: 1%;
            height: 100px;
            background: #ffe4c4;
        }

        .Content {
            display:none;       
            width: 100%;
            background: green;
        }

        #contentOnDisplay {
            min-height: 100px;
            width: 100%;
            float: left; 
            background: green;
            display: block;
        }
    </style>
</head>

<body>
    <div class="Content" id="floating1Content">content for 1</div>
    <div class="Content" id="floating2Content">content for 2</div>
    <div class="Content" id="floating3Content">content for 3</div>
    <div class="Content" id="floating4Content">content for 4</div>
    <div class="Content" id="floating5Content">content for 5</div>
    <div class="Content" id="floating6Content">content for 6</div>
    <div class="Content" id="floating7Content">content for 7</div>
<!--    <div class="Content" id="floating8Content">content for 8</div>
    <div class="Content" id="floating9Content">content for 9</div>-->

    <div class="floating" id="floating1"></div>
    <div class="floating" id="floating2"></div>
    <div class="floating" id="floating3"></div>
    <div class="floating" id="floating4"></div>
    <div class="floating" id="floating5"></div>
    <div class="floating" id="floating6"></div>
    <div class="floating" id="floating7"></div>
<!--    <div class="floating" id="floating8"></div>
    <div class="floating" id="floating9"></div>-->

<script type="text/javascript">
    var getLeftMostPositionOfFirstItem = $("#floating1").position().left;

    $(document).ready(function() {
        $(".floating").click(function() {
            var elementID = $(this).attr("id");
            $("#contentOnDisplay").remove(); //hides the existing contents
            var firstItemOFNextRow = getTheFirstItemOfNextRow(elementID);

            getAllTheConstentsOfAdivAndPrepenedIt(firstItemOFNextRow, getTheIdOfFirstItemOfNextRow(elementID));
            return false;
        });
    });

    function getTheFirstItemOfNextRow(clickedItemID) {
        var getTheIdNumberOfThisItem = parseInt(clickedItemID.replace("floating", ""));
        var position = $("#" + clickedItemID).position();
        var idOfTheElementToBeInstertedBefore = "";
        for (var i = getTheIdNumberOfThisItem + 1; i < $(".floating").length; i++) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem*1.5) {
                idOfTheElementToBeInstertedBefore = "#floating" + i;
                break;
            }
        }
        if (idOfTheElementToBeInstertedBefore.length == "") {
            idOfTheElementToBeInstertedBefore = "#floating" + $(".floating").length;
        }
        return idOfTheElementToBeInstertedBefore;
    };

    function getTheIdOfFirstItemOfNextRow(elementID) {
        return parseInt(elementID.replace("floating", ""));
    };

    function getAllTheConstentsOfAdivAndPrepenedIt(idToPrepend, IdNumber) {
        var htmlOfTheContent = $("#floating" + IdNumber + "Content").html();
        htmlOfTheContent = "<div id='contentOnDisplay'>" + htmlOfTheContent + "</div>";
        if (IdNumber <= $(".floating").length - getNuumberOfItemsInLastRow()) {
            $(idToPrepend).before(htmlOfTheContent);
        } else {
            $(idToPrepend).after(htmlOfTheContent);
        }
        return false;
    };

    function getNuumberOfItemsInLastRow() {
        var numberOfColoumns = 0;
        for (var i = $(".floating").length; i > 0; i--) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            numberOfColoumns++;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem * 1.5) { 
                break;
            }
        }
        return numberOfColoumns;
    };
</script>
</body>
</html>

浮动项目画廊。我想在使用 jquery 的行之间添加一个 class

Gallery of floated items. I want to add a class between the lines using jquery

html

javascript

css

jquery

gallery