每个循环中的jQuery元素

时间：2018-02-22 06:43:26

标签： jquery

从jquery元素集合开始：

var couponsList = $('.coupon')

然后创建列表的克隆：

var remainingCouponsList = couponsList.clone()

我正在尝试迭代这些元素，并根据它们的宽度将它们推送到一个新的列表中：

newList = $(document.createDocumentFragment())
remainingCouponsList.each( function( index, el ) {
    w = el.width()
    ...
})

但我绝不能考虑这个问题。无论我尝试什么：

$(this).width()
el.offsetWidth

我永远无法从循环中访问此元素的width属性。是什么给了什么？

修改：这里是所有代码..也许你可以帮助弄清楚我做错了什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .headercouponlist{display: block;border: 1px solid #efefef;border-radius: 4px;width: 600px;height: 80px;float: left;color: black;text-align: left;padding: 8px 0px 8px 8px;box-sizing: border-box;}
@media screen and (max-width: 1280px){
    .headercouponlist,.headercouponbanner{
        width: 400px;
    }
}
@media screen and (max-width: 769px){
    .headercouponlist,.headercouponbanner{
        width: 90%;

    }
}

.headercouponlist{
    color: #a8a6a6;
    overflow-y: scroll;
}
span.title{float: left;clear: both;height: 20px;}

.headercouponlist .coupons{
    display: flex;
    flex-wrap: wrap;
    float: left;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.headercouponlist .coupons .coupon{
    padding: 4px;
    border: 1px solid #a8a6a6;
    border-radius: 4px;
    display: block;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 10px;
    height: 18px;
    overflow: hidden;
    margin: 0px 2px 2px 2px;
    transition: all 0.4s
}
.headercouponlist .coupons .coupon a{
 text-decoration: none;
 color: #a8a6a6;
 transition: all 0.4s
}
.headercouponlist .coupons .coupon a:hover{
 color: #565656
}
.headercouponlist .coupons .coupon:hover{
    color: #565656;
    border: 1px solid #565656;
    cursor: pointer;
}
    </style>
</head>
<body>
    <div class="headercouponlist" id="couponframe">
        <div class="coupons">
                                                                <span class="title">マイクーポン：</span>
                                                <div class="coupon">
                    <a href="/coupon/16">SMS配信限定クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/17">LINE@限定／STANDARDの1,000割引クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/18">イベント限定　フレーバー(15ml)300円割引クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/19">CLOUD17LPアドワーズ</a>
                </div>
                                                                                                </div>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script src="./coupon-manager.js"></script>
</body>
</html>

JavaScript文件：

    $(document).ready(function(){

    var row = $('.coupons').width()
    var couponsList = $('.coupon')
    var returnNewCouponsList = []

    /**
     * Outer Loop: set up for the construction of coupon rows
     * over multiple iterations of an inner loop,
     * and then add the new row to the new return list
     */

    var newCouponsRow;

    do {
        newCouponsRow = []
        var remainingCouponsList = couponsList.clone()
        var remainingRowWidth = row

        /**
         * Inner Loop: iterate through remaining coupons 
         * until a row has been made (in other words, 
         * until no more coupons can be added to the row)
         */
        var constructingRowSemaphore = true
        while (constructingRowSemaphore == true) {
            constructingRowSemaphore = false
            var nextRemainingCouponsList = $(document.createDocumentFragment())
            /**
             * Innerist Loop: go through the remaining coupons
             * adding them to a row if appropriate
             */
            remainingCouponsList.each( function( index, el ) {
                var w = el.width()
                console.log(w)
                if (w < remainingRowWidth) {
                    newCouponsRow.push(el)
                    remainingRowWidth -= w
                    constructingRowSemaphore = true
                } else {
                    nextRemainingCouponsList.push(el)
                }
            })
            remainingCouponsList = nextRemainingCouponsList.clone()
        }

        /**
         * deposit new row into the return array
         * and clean up for the next iteration
         */
         returnNewCouponsList = returnNewCouponsList.concat(newCouponsRow)
    } 
    while (newCouponsRow.length)

    console.log("adding coupons back into dom")

    $('coupons').html(returnNewCouponsList)
})

3 个答案:

答案 0 :(得分：1)

试试此代码$(el).width()

希望它有用

答案 1 :(得分：1)

请参阅工作步骤

1）var couponsList = $('.coupon') console.log(couponsList.width());//This returns 90 I just consoled your output.

2）var remainingCouponsList = couponsList.clone().css({ width: couponsList.width(), height: couponsList.height() });     我已将.css添加到克隆元素中。

3）最后在每个循环中，我开始得到预期的宽度，高度。

var w = $(el).width();                                                                 
console.log(w);

请参阅下面的工作代码段。 

$(document).ready(function(){

    var row = $('.coupons').width()
    var couponsList = $('.coupon')
    console.log(couponsList.width());//This returns 90
    var returnNewCouponsList = []

    /**
     * Outer Loop: set up for the construction of coupon rows
     * over multiple iterations of an inner loop,
     * and then add the new row to the new return list
     */

    var newCouponsRow;

    do {
        newCouponsRow = []
        var remainingCouponsList = couponsList.clone().css({
        width: couponsList.width(),
        height: couponsList.height()
    });
        var remainingRowWidth = row

        /**
         * Inner Loop: iterate through remaining coupons 
         * until a row has been made (in other words, 
         * until no more coupons can be added to the row)
         */
        var constructingRowSemaphore = true
        while (constructingRowSemaphore == true) {
            constructingRowSemaphore = false
            var nextRemainingCouponsList = $(document.createDocumentFragment())
            /**
             * Innerist Loop: go through the remaining coupons
             * adding them to a row if appropriate
             */
            remainingCouponsList.each( function( index, el ) {
                var w = $(el).width();     
                console.log(w);
                
                /*if (w < remainingRowWidth) {
                    newCouponsRow.push(el)
                    remainingRowWidth -= w
                    constructingRowSemaphore = true
                } else {
                    nextRemainingCouponsList.push(el)
                }*/
            })
            remainingCouponsList = nextRemainingCouponsList.clone()
        }

        /**
         * deposit new row into the return array
         * and clean up for the next iteration
         */
         returnNewCouponsList = returnNewCouponsList.concat(newCouponsRow)
    } 
    while (newCouponsRow.length)

    console.log("adding coupons back into dom")

    $('coupons').html(returnNewCouponsList)
});
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script src="./coupon-manager.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .headercouponlist{display: block;border: 1px solid #efefef;border-radius: 4px;width: 600px;height: 80px;float: left;color: black;text-align: left;padding: 8px 0px 8px 8px;box-sizing: border-box;}
@media screen and (max-width: 1280px){
    .headercouponlist,.headercouponbanner{
        width: 400px;
    }
}
@media screen and (max-width: 769px){
    .headercouponlist,.headercouponbanner{
        width: 90%;

    }
}

.headercouponlist{
    color: #a8a6a6;
    overflow-y: scroll;
}
span.title{float: left;clear: both;height: 20px;}

.headercouponlist .coupons{
    display: flex;
    flex-wrap: wrap;
    float: left;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.headercouponlist .coupons .coupon{
    padding: 4px;
    border: 1px solid #a8a6a6;
    border-radius: 4px;
    display: block;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 10px;
    height: 18px;
    width:100px;
    overflow: hidden;
    margin: 0px 2px 2px 2px;
    transition: all 0.4s
}
.headercouponlist .coupons .coupon a{
 text-decoration: none;
 color: #a8a6a6;
 transition: all 0.4s
}
.headercouponlist .coupons .coupon a:hover{
 color: #565656
}
.headercouponlist .coupons .coupon:hover{
    color: #565656;
    border: 1px solid #565656;
    cursor: pointer;
}
    </style>
</head>
<body>
    <div class="headercouponlist" id="couponframe">
        <div class="coupons">
                                                                <span class="title">マイクーポン：</span>
                                                <div class="coupon">
                    <a href="/coupon/16">SMS配信限定クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/17">LINE@限定／STANDARDの1,000割引クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/18">イベント限定　フレーバー(15ml)300円割引クーポン</a>
                </div>
                                                <div class="coupon">
                    <a href="/coupon/19">CLOUD17LPアドワーズ</a>
                </div>
                                                                                                </div>
    </div>
    
</body>
</html>

答案 2 :(得分：0)

请在循环couponsList[index].offsetWidth内使用。

希望，你得到了每个元素的宽度。

相关问题
最新问题