CODEWITHSUNDEEP
jqueryfindeachclosest
skramer
skramer

Reputation: 67

Find closest element from an Each function in jQuery

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/

Upvotes: 2

Views: 1161

Answers (5)

chrisayn
chrisayn

Reputation: 11

$(".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");}
});

Upvotes: 0

Ankit Singhania
Ankit Singhania

Reputation: 1010

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

Upvotes: 0

Will
Will

Reputation: 211

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");}

});

Upvotes: 0

adeneo
adeneo

Reputation: 318302

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

Upvotes: 2

RGS
RGS

Reputation: 5211

$(".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/

Upvotes: 0

Related Questions