Question

I have a row of divs, all have the same classes. They display user comments on the page.

I have written an if statement to change the widths of the comments if there is less than 4.

Is there a way I can target only those divs in that one row, even if they share the same class name

JS

// if statements to sort out widths if there are < 4 comments
if(commentLength === 1){
    $('.comment').css('min-width','1453px');
}
else if(commentLength === 2){
    $('.comment').css('min-width','700px');
}
else if(commentLength === 3){
    $('.comment').css('min-width','470px');
}

HTML

<div class="commentary">
    <div class="comment">Sample commnent</div>
    <div class="comment">Sample commnent</div>
    <div class="comment">Sample commnent</div>
    <div class="comment">Sample commnent</div>
</div>
<div class="commentary">
    <div class="comment">Sample commnent</div>
    <div class="comment">Sample commnent</div>
</div>
<div class="commentary">
    <div class="comment">Sample commnent</div>
</div>

Answer 1

$('.commentary').each(function(){
    var $myComments = $(this).find('.comment');
    var commentLength = $myComments.length;

    if(commentLength === 1){
        $myComments.css('min-width','1453px');
    }
    else if(commentLength === 2){
        $myComments.css('min-width','700px');
    }
    else if(commentLength === 3){
        $myComments.css('min-width','470px');
    }        
});