Using jQuery to extract value from a row

Question

I'm building a tic-tac-toe game with javascript. The issue is when I am checking to see if there are any winners on the board after each move.

When I run this jQuery function

$( "#row1")[0].innerHTML

The output is

"<span0>o</span0><span1>x</span1><span2>o</span2>"

Because each html element has a different span I'm not quite sure how to check without writing out all the possibilities. I have looked at SOF and found this Get array of values use JQuery?. It's quite similar but it doesn't account for the different span tags, e.g (span0, span1, span2).

I'm trying to see how I can only get the 'o','x','o' from the list.

jfriend00 · Accepted Answer · 2014-03-01 21:17:52Z

3

To get you "oxo" in a string which you can then process however you see fit, you can use:

// gets you "oxo"
$( "#row1").text();

If you want those characters in an array, you could do this:

// gets you ["o", "x", "o"]
$( "#row1").text().split("");

answered Mar 1, 2014 at 21:17

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

redV Over a year ago

Short answer, but your answer will fail if a span has text with more than one digit :)

jfriend00 Over a year ago

@redV - These aren't digits. These are "x" characters and "o" characters and no tic-tac-toe game I've ever seen allows more than one value per square and this solves the case the OP asked for.

redV Over a year ago

+1 :) I am accepting my insanity and I learned a new thing today :)

Chad McGrath · Accepted Answer · 2014-03-01 21:43:25Z

I don't think that those spans are valid html5 tags. Each of the span tags should just be . If you are using the individual span names to insert text into them, then it is better to do that by id eg . So wherever you are referencing $("span1") or $("#row1 span1") you would instead reference the id like this: $("#square1") in order to insert the x and o text. There are other ways to do this, but for these purposes it is probably just best to have 9 separate ids. This way the example in the link that you referenced to read them into an array is essentially what you need.

If you really don't want to do that, then add a give all of your span tags a class= 'box' class. eg: . In this case the code to read into an array based on the example you provided in the link would have to change from $('#row1 span') to $('#row1 .box') (notice the period before "box". indicating that we are looking for classes, rather than tag names) I don't like this second solution, because it doesn't fix the invalid html5 tags.

I suppose there may be a way to use a wildcard to search all elements that begin with "span" but that would just be way more ugly.

redV · Accepted Answer · 2014-03-01 21:15:58Z

0

Demo

Below code will do the job

var html = "<span0>o</span0><span1>x</span1><span2>o</span2>";
var values = $.map($(html), function( n, i ) {
   return $(n).html();
});
console.log(values);

answered Mar 1, 2014 at 21:15

redV

6941 gold badge9 silver badges27 bronze badges

Comments

vlio20 · Accepted Answer · 2014-03-01 21:19:52Z

0

Here is how you can get it, we will loop through child span elements of #row1 and alert their text value (which is the inner text):

$("#row1").children().each(function()
({
   alert($("this").text());
});

edited Mar 1, 2014 at 21:19

answered Mar 1, 2014 at 21:14

vlio20

9,33518 gold badges104 silver badges188 bronze badges

2 Comments

jfriend00 Over a year ago

You may want to notice that the OP is using elements like <span0> and <span1>, not <span>.

jmoon90 Over a year ago

Yeah that produces a blank array. The only way I grab objects is when I specify <span0>, or <span1>

Collectives™ on Stack Overflow

Using jQuery to extract value from a row

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related