jquery .text() returns empty string

Question

Not sure why, but with the following Html

<div id="basket" class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Basket</h3>
    </div>
    <div class="panel-body">

            <div id="row-031d9f2b-c6e9-e311-827b-c8bcc8ef428f" class="row">
                <div class="col-xs-8"><span id="qty-031d9f2b-c6e9-e311-827b-c8bcc8ef428f">5</span> <small>x</small> Match Night Ticket [Adult]</div>
                <div class="col-xs-2 text-right">16.00</div>
                <div class="col-xs-2"><a name="removeFromBasket" href="javascript:;" data-pid="031d9f2b-c6e9-e311-827b-c8bcc8ef428f"><span class="glyphicon glyphicon-remove text-danger"></span></a></div>
            </div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-8"><strong>Total</strong></div>
            <div id="basket-total" class="col-xs-4">80.00</div>
        </div>
    </div>
</div>

I cannot get the value of the span with the id qty-031d9f2b-c6e9-e311-827b-c8bcc8ef428f

I'm using the following javascript which returns an empty string. I'm sure I am missing something obvious but after looking at it for an hour or so and trying umpteen variations, I cannot see where I am going wrong.

 var qtyId = "qty-" + pid;
                //var productRowId = "#row-" + pid;
                alert($("#basket .panel-body " + qtyId).text());

pid in the script above equals the guid value 031d9f2b-c6e9-e311-827b-c8bcc8ef428f

Seaching by ID requires using #, I.E. #qty-031d9f2b-c6e9-e311-827b-c8bcc8ef428f. — Erik Philips
– Erik Philips, Commented Jun 3, 2014 at 20:47

j08691 · Accepted Answer · 2014-06-03 20:46:15Z

2

Change the alert to:

alert($("#" + qtyId).text());

jsFiddle example

Since IDs must be unique, there's no need to chain them here to get the one you want. And you have to remember to use the # to prefix the ID.

answered Jun 3, 2014 at 20:46

j08691

208k33 gold badges269 silver badges281 bronze badges

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

1 Comment

sparkymark75 Over a year ago

Thanks, how embarrassing. I knew I had spent too long looking at it.

ArtOfCode · Accepted Answer · 2014-06-03 20:47:47Z

1

It's because you're referring to the element as a top-level element rather than by ID. Using jQuery, with no . or # selector, the Sizzle selector engine assumes you're referring to an element, such as a <div>.

To solve your problem, just add the ID selector in:

var qtyId = "qty-" + pid;
//var productRowId = "#row-" + pid;
alert($("#basket .panel-body #" + qtyId).text());

The only change there is on the last row, where I have added #.

answered Jun 3, 2014 at 20:47

ArtOfCode

5,7085 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

jquery .text() returns empty string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related