I am trying to set a custom width and height for each item in the selector and it won't work. I'm at a loss. Everything looks correct to me. Am I missing a syntax error or something? The console.log doesn't even work.

<div id="posts">
    <article>
        <div class="view">
            ...
        </div>
    </article>

    <article>
        <div class="view">
            ...
        </div>
    </article>
    ...
</div>

<script>
$( document ).ready(function() {
    $( "#posts .view" ).each(function(){
        console.log('Testing');
        $(this).css("height", "400px");  
    });
});
</script>

I am trying to set a custom width and height for each item in the selector and it won't work. I'm at a loss. Everything looks correct to me. Am I missing a syntax error or something? The console.log doesn't even work.

<div id="posts">
    <article>
        <div class="view">
            ...
        </div>
    </article>

    <article>
        <div class="view">
            ...
        </div>
    </article>
    ...
</div>

<script>
$( document ).ready(function() {
    $( "#posts .view" ).each(function(){
        console.log('Testing');
        $(this).css("height", "400px");  
    });
});
</script>

• javascript
• jquery
• each

• Do you get any error message in the console? – Richard Dalton Commented Sep 5, 2013 at 10:42
• looks fine to me jsfiddle/arunpjohny/53R3T/1 – Arun P Johny Commented Sep 5, 2013 at 10:43
• Works fine for me: jsfiddle/qz8Lm – Darren Commented Sep 5, 2013 at 10:45
• @ArunPJohny jsfiddle load jquery automatically...may be OP missing that part. – Dipesh Parmar Commented Sep 5, 2013 at 10:45
• 1 Are you trying console.log in IE? This has some known issues. Failing that, I can't see any errors and the above fiddle looks alright to me. I suggest trying a few different browsers and perhaps different debugging software (firebug can be handy). EDIT: As mentioned above, if you're having CSS clashes - this can cause issues. Or, if you're not including the jQuery library, it wont work at all. – Myles Commented Sep 5, 2013 at 10:46

3 Answers 3

Try this:

<div id="posts">
<article>
    <div class="view">
        ...
    </div>
</article>

<article>
    <div class="view">
        ...
    </div>
</article>
...

<script>

$( document ).ready(function() {
$( "#posts .view" ).each(function(){
    console.log('Testing');
    $(this).css("height", "400px");  
});
});

</script>

Try

<div id="posts">
    <article>
        <div class="view">
            ...
        </div>
    </article>

    <article>
        <div class="view">
            ...
        </div>
    </article>
    ...
</div>
<script>
$( document ).ready(function() {
    $( "#posts .view" ).each(function(){
        console.log('Testing');
        $(this).css("height", "400px");  
    });
});
</script>

Added script tags in case what you posted in your question was the full markup

A bit optimized version:

$( document ).ready(function() {
    $( "#posts" ).find( ".view" ).each(function(){
        console.log('Testing');
        $(this).css("height", 400);  
    });
});