浮动项目库.我想使用jquery在两行之间添加一个类

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

本文关键字：之间 两行 添加 一个 jquery 项目库      更新时间：2023-09-26

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

    1   2   3 <--line 1
    4   5   6 <--line 2
    7   8   9 <--line 3

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

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

任何想法都会非常有帮助。非常感谢。Constantin Chirila

稍后编辑：代码一团糟，它是更大事情的一部分，对此感到抱歉。

              <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...

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

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

这就是我使用jQuery执行所有单击和显示行为的方式。

<!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>
相关文章：