Find closest element from an Each function in jQuery

Question

I have a page that renders a score from a quiz. I want to easily display a response text next to the score. I've managed to easily do this when only one score is displayed, but my users have a dashboard with multiple scores and I want to display this response text for each one, but I can't get it to work. I've tried (find), (closest), (prev), and others. Here is what I got:

HTML

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>1</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>2</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>3</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>4</em> points.</div>
</div>

and the JS

$(".quiz_score_possible em").each(function(){

    if ($(this).is(":contains('1')")) {$(this).closest(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).closest(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).closest(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).closest(".quiz_score_response").text("You're Awesome");}

});

And my jsfiddle http://jsfiddle.net/9FvM8/3/

Answer 1

Replace :

if ($(this).is(":contains('1')")) {$(this).closest(".quiz_score_response").text("You're OK");}

with :

if ($(this).is(":contains('1')")){$(this).parent().parent().find(".quiz_score_response").text("You Suck");}

or better :

if ($(this).text() == '1') {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}

using exact match with text() will make the code more efficient as in the future users points will be a combination of several numbers instead of one.

Update JS Fiddle

Answer 2

As it's numbers you're getting, you could just keep the responses in an array, and go the opposite way, start with the element whos text you want to change, and inside the callback for text get the number and the matching response

var arr = ["", "You Suck", "You're OK", "You're Good", "You're Awesome"];

$(".quiz_score_response").text(function() {
    return arr[+$(this).next('div').find('em').text()];
});

FIDDLE

Answer 3

$(".quiz_score_possible > em").each(function(){        
    if ($(this).is(":contains('1')")) {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().parent().find(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Awesome");}  
});

Demo:

http://jsfiddle.net/z2vDm/

Answer 4

Of course you can not do this, you should use

$(this).parent().siblings(".quiz_score_response");

so the code will like

$(".quiz_score_possible em").each(function(){  
    if ($(this).is(":contains('1')")) {$(this).parent().siblings(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().siblings(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().siblings(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().siblings(".quiz_score_response").text("You're Awesome");}

});

Answer 5

$(".quiz_score_possible em").each(function(){
    if ($(this).is(":contains('1')")) {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().parent().find(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Awesome");}
});