Search code examples
javascripthtmljqueryoffset

How to offset().top from every $('.example p') element


I'm trying to get every offset().top value of every $('.example p') element

console.log($('.example p')[1].offset().top)

Uncaught TypeError: $(...)[1].offset is not a function

I've tried a bunch of things, like using other selectors, using a for loop, foreach... I can only get the offset().top value from the first element of that array by removing [1], for the second, third, etc... element I can't seem to get it.


Solution

  • Simply iterate through each of the elements in the selector ".example p" using each

    See demo:

    $(".example p").each(function(i)
    {
      console.log( $(this).offset().top); 
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="example">
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    </div>
    <div class="something">
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    </div>
    <div class="example">
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    
      <p>Doggo ipsum you are doing me a frighten corgo heckin good boys and girls pupperino, fat boi. Doing me a frighten you are doing me the shock clouds you are doin me a concern borkf super chub, wow very biscit you are doing me a frighten pupper.   you are doing me a frighten pupper porgo. Fluffer wow very biscit blop fluffer puggorino puggo very hand that feed shibe, boofers maximum borkdrive the neighborhood pupper boofers. 
      </p>
    </div>