Question

EDIT: this code works fine, overlooked that the divs were stacked on top of eachother, fooled by visual feedback 🙁 excuse me.

I have been searching the each questions here on stackOverflow and reading the jquery doc but I cant find out why this snippet is only placing “bar” in one of the divs. What am I missing here? All examples seem to work this way:

<div class="foo"></div>
<div class="foo"></div>

$(".foo").each(
  function() {
    $(this).append("bar");
  }
);

I select all foo class elements, iterate over them with each, in the each function this is the current element right? Seems not though… what am I doing wrong?

I also tried:

function(index, element) {$(element) etc. same results.

Answer 1

You need to provide a function with the index and element params, this will allow you to iterate over the objects jQuery selects.

You can only do this once the document is ready, so make sure it is ready, or wrap in on ready

 <div class="foo"></div>
 <div class="foo"></div>

<script type="text/javascript">
$(document).ready(function(){

    $(".foo").each(function(index, element) {
        $(element).append("bar");
      }
    );
});
</script>