Geek Answers Handbook

JQuery - counting the number of rows and adding an attribute - condition not met

I am trying to count the number of rows using the value "offset (). Top" of each of the articles on the page. The first two conditions are met, but the last, to determine the next line, is never fulfilled, I can

var datarow = 1;
var rowNum = 0;
    if(prev.length == 0){
        datarow = 1;
        $this.attr("data-row", datarow);
    }
    else if(prev.length > 0 && $this.offset().top == prev.offset().top){
        $this.attr("data-row", datarow);
    }
    else if(prev.length > 0 && $this.offset().top != prev.offset().top){ // THIS CONDITION IS NEVER MET
        rowNum++;
        $this.attr("data-row", datarow + rowNum);
    }
    console.log("rowNum is:" + rowNum);

I'm new to using jQuery, so I apologize for any beginner errors. Here is a fiddle to show you what I'm trying to accomplish, and so that the code above has more context. https://jsfiddle.net/JackofD/a598Lp0c/1/ and the full-screen result https://jsfiddle.net/JackofD/a598Lp0c/1/embedded/result/

Any help well appreciated Thanks in advance

P.S , row-row. , ( ) (, data-row = "2" ).

+4
1

, . script . . script .

, .

    <!DOCTYPE html>
<html>
<head>
<style>
  .contentWrapper{
        width: 98%;
        height: auto;
        margin: 1% auto;
        padding: 1%;
        outline: 1px solid #999;
        float: left;
    }

        .promotionWrapper{
            width: 300px;
            height: 200px;
            outline: 1px dotted #666;
            float: left;
            margin-left: 1%;
            margin-bottom: .5%;
            position: relative;
            cursor: pointer;
        }

        .result{
            background: #999;
            width: 90%;
            height: auto;
            margin: .5% auto;
            color: #fff;
            padding: .5%;
        }


.clearfloat{
    clear: both;
}
</style>
<body>
 Inspect the first block to see what I'm looking for
<!--**************************************************************************************-->
    <div class="siteWrapper">
        <section class="contentWrapper">
            <section class="productWrapper">
                <article class="promotionWrapper"></article>
                <article class="promotionWrapper"></article>
                <article class="promotionWrapper"></article>
                <article class="promotionWrapper"></article>
                <article class="promotionWrapper"></article>

                <div class="clearfloat"></div>
            </section>
        </section>

        <section class="contentWrapper">
            <section class="productWrapper">
                <article class="promotionWrapper"></article>
                <article class="promotionWrapper"></article>

                <div class="clearfloat"></div>
            </section>
        </section>
        <div class="clearfloat"></div>
<div class="result result0"></div>
        <div class="result result1"></div>
        <div class="result result2"></div>
        <div class="result result3"></div>
    </div>
<!--**************************************************************************************-->
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

function PopulateTotalCounts()
{
var totalRows =0, totalArts =0, totalTop=-1;
$('.promotionWrapper').each(function(i,e){
      if(totalTop!=$(this).offset().top){
        totalTop = $(this).offset().top;
        totalRows++;
     } 
     totalArts++;
})
$(".result0").html("Total rows:"+totalRows+" and total articles:"+totalArts);
$(".result1").html("");
$(".result2").html("");
$(".result3").html("");
}

$(document).ready(function(){
 PopulateTotalCounts();
 window.addEventListener("resize", PopulateTotalCounts);

 $('.promotionWrapper').click(function () {
    var offset = $(this).offset();
    $('.result2').html('Top = ' + offset.top);

    if($(this).prev().length == 0){
        $(".result3").html("There is no previous element");
    }
    else if($(this).prev().length > 0){
        var prevoff = $(this).prev().offset().top;
        $(".result3").html("the previous top is: " + prevoff);
    }

    $(".result1").html("Total number of articles in this section: " + $(this).parent().find('article.promotionWrapper').length);

    var rowCount =0;
    var top = -1;
    var artCount =1, artRowNumber=0;
    var freezArtCount=0;
    $(this).parent().find('article.promotionWrapper').each(function(i,e){
     if(top!=$(this).offset().top){
        top = $(this).offset().top;
        rowCount++; 
      if(freezArtCount==0) artCount =1;     
     }  
     if(freezArtCount==0){   
     if($(this).offset().top == offset.top && $(this).offset().left==offset.left)
     {
        freezArtCount=1;
        artRowNumber=rowCount;
     }
     else{ artCount++;}
     }
    });

    $(".result1").html($(".result1").html()+"<br/> Total number of rows in this section: " + rowCount);
    $(".result1").html($(".result1").html()+"<br/> Article is in Row:" + artRowNumber + " at Position:"+ artCount);
});
});
</script>
</html>

1: attr

$(document).ready(function(){
 var rowCount1 =0;
    var top1 = -1;
    $('article.promotionWrapper').each(function(i,e){
     if(top1!=$(this).offset().top){
        top1 = $(this).offset().top;
        rowCount1++;            
     }  
     $(this).attr('data-row',rowCount1);    
        });
 PopulateTotalCounts();
+1

More articles:


All Articles