jQuery doesn't seem to be finding nested class

Question

I'm looping through several instances of HTML that looks like this:

<div class="matchup-container">
    <div class="gamequestion">
        <strong>NBA: Who will WIN this matchup?</strong>
    </div>
    <table class="mg-gametableQ">
        <tbody>
            <tr>
                <td class="mg-column1 start">
                    <div class="matchupDate">
                        <span class="startTime">11:00 AM</span>
                    </div>
                </td>
                <td class="mg-column3 opponents  ">
                    <span>
                        <strong>
                            <a>Team</a>: Win
                        </strong>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="mg-column1 start">
                    <div class="matchupDate">
                        <span class="startTime">11:00 AM</span>
                    </div>
                </td>
                <td class="mg-column3 opponents  ">
                    <span>
                        <strong>
                            <a>Team</a>: Win
                        </strong>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

There are several matchup-container divs to loop through, so I'm using .each() to do that. Then I want to loop through each mg-column3 inside that div, so I use .each() again. Finally, I want to pull the text inside the <a> (in this case, "Team"), and append that inside the mg-column3 div. My jQuery code is here:

$('.matchup-container').each(function() {
    var title = $.trim($(this).find('.gamequestion').text());

    $(this).find('.mg-column3').each(function () {
        if (isStraightUp(title))
        {
            var teams = getStraightUpTeams(this);
            $(this).append('<span class=odds-favorite>' + teams[0] + '</span>');
        }
    });
});

function isStraightUp (title)
{
    return true;
}

function getStraightUpTeams(matchup)
{
    var teams = [];

    teams[0] = $(matchup).find("a")[0].text();
    teams[1] = $(matchup).find("a")[1].text();

    return teams;
}

But nothing happens. The Chrome dev tools tell me that I can't call .text() on an undefined element, so everything crashes. But I can't figure out why the jQuery isn't grabbing the text inside the <a> tags that I want. Here's a JSFiddle. Can anyone help?

Your mg-column3 elements only contain a single a each. Why are you trying to access 2? The 2nd doesn't exist. — James Montagne
– James Montagne, Commented Mar 18, 2014 at 3:18
@JamesMontagne just realized that myself, and fixed it. thanks — aquemini
– aquemini, Commented Mar 18, 2014 at 3:21

Felix · Accepted Answer · 2014-03-18 03:23:06Z

1

Since $(matchup) return a jQuery object, you need to use jQuery method like .eq() or :eq() selector instead:

teams[0] = $(matchup).find("a").eq(0).text();
teams[1] = $(matchup).find("a").eq(1).text();

Updated Fiddle

or:

teams[0] = $(matchup).find("a:eq(0)").text();
teams[1] = $(matchup).find("a:eq(1)").text();

Updated Fiddle

edited Mar 18, 2014 at 3:23

answered Mar 18, 2014 at 3:16

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aquemini Over a year ago

thanks, this works! i'll accept this answer when i can because you were first.

PlantTheIdea Over a year ago

use .eq() over :eq() every single time. way, way faster.

Felix Over a year ago

@PlantTheIdea I've added the demo with .eq() :)

Sudharsan S · Accepted Answer · 2014-03-18 03:17:15Z

1

Use .eq() in Jquery.

function getStraightUpTeams(matchup)
{
    var teams = [];

    teams[0] = $(matchup).find("a").eq(0).text();
    teams[1] = $(matchup).find("a").eq(1).text();

    return teams;
}

answered Mar 18, 2014 at 3:17

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-03-18 03:18:25Z

1

You have an error in getStraightUpTeams. Look at your console to see the error

Uncaught TypeError: Property 'text' of object [object HTMLAnchorElement] is not a function

You are trying to call a method text in a dom element reference which does not have such a method, you need to use jQuery wrapper to call the method .text()

function getStraightUpTeams(matchup) {
    var teams = [],
        $as = $(matchup).find("a");

    teams[0] = $as.eq(0).text();
    teams[1] = $as.eq(1).text();

    return teams;
}

Demo: Fiddle

answered Mar 18, 2014 at 3:18

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

jQuery doesn't seem to be finding nested class

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related