Using jQuery to extract value from a row - javascript

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.

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

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.

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

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

Related

Details about JQuery's .html() method

This is the description of the .html() method: "Get the HTML contents of the first element in the set of matched elements." My question is what exactly is the "HTML contents" it refers to?
Lets say I have a div with content I wish to store HTML content for but also render it raw for viewing purposes. Lets say e is my Div.
$(e).html() //this returns a string with what looks like regular HTML besides the occurrence of many HTML entities.
//if i search for greater than signs:
x.text().search("&gt") //I get 2273 which I'm assuming is the number of occurrences.
//However if I convert the HTML to a string I seem to get different content. Why?
$(output).val(e.html().toString()); //for viewing the output markup for a div
e.html().toString().search("&gt") //this now gives me 317, which is a lot less HTML entities than I had before
Would I be correct in saying that the .toString() method just corrupts my HTML content? Which one do I want? Whenever I render this to a raw div I get similar results for both even though they seem vastly different. Which one do I want in order to display and save the correct output information? Any knowledge is greatly appreciated!
&gt will match both > and > so when you run it on an html string will match all the tags as well as uses of > in text
Hard to tell what you are comparing since you use unknown x.text()

Javascript create element and add HTML

say for instance i have the following line:
var arrowBase = document.createElement('div')
Now within this div tag i want to add some HTML (i.e text).
Then i tried the following:
arrowBase.innerHTML('hello');
However this does nothing:S
i have also tried: arrowBase.HTML('hello');
But once again without any result
I know is that rather simple but in my search i could'nt find the answer hope someone is able to help me out here
Read the docs, it is not a method.
arrowBase.innerHTML = 'hello';
arrowBase.textContent = "HELLO"
also does the same thing but only text can be specified. Whereas in innerHTML html tags can be specified along with the text.

Get div from page

I've looked everywhere for a technique, but I failed to find much that suited my needs.
Basically, I would like to utilize JavaScript or jQuery (probably using Ajax) to grab a div that contains a word from a page on my site.
I'm not asking anyone to code this for me, I would just like to be pointed in the right direction.
For example, let's say I have this HTML page:
<div class='findfromthis'>hello guys</div>
<div class='findfromthis'>goodbye guys</div>
<div class='findfromthis'>goodbye people</div>
I would like to display all the divs that contain the word "guys" in them.
Thank you so much in advance!!
JQuery has a contains selector that will find all elements containing specific text. Something along the lines of $("div:contains('guys')") should do the trick. Then you can use .each or .show etc to work with the selected elements.
See http://api.jquery.com/contains-selector/ for more detail.
EDIT :
The following code was deemed useful by the OP. It'll select all divs with class "findfromthis" which don't contain the phrase "guys", and remove them from the DOM:
$("div.findfromthis:not(:contains('guys'))").remove();
Give your div a class, say '.myDiv' and then via jQuery:
$('.myDiv').doSomething...
I'm not entirely sure how AJAX would play into this, but to point you in the right direction:
http://api.jquery.com/jQuery.ajax/
Your edit is an entirely different question. But you'd do the same to get the divs. In this case, you'd use 'each':
$('.findfromthis').each(function(){
// for each div you can now grab the text it contains:
DivText = $(this).text();
// now you could use a variety of different JS seach techniques to find
// your content. But one example to search for a word or word fragment would be:
if (DivText.indexOf("guys") !== -1)){
// then this div has the word 'guys' in its text somewhere
}
})
If the search term is more complex (like not wanting to find fragments) then you may want to use REGEX for the search part instead.
Again, though, not sure where AJAX would fit into this. This all can happen client-side.

Javascript question regarding hiding certain divs by id thats a changing random number

Can anyone help me with javascript that hides divs matching a specific random number? Every time I load this page it has two divs like <div id='1945498985'> the number changes every page load but remains between 9-10 in length how would I fetch the two divs on the page and remove/hide them?
Let me clarify the two divs on this page each have a random number between 9 and 10 in length.
One such div looks like this:
<div id='843401712' style='position:relative;z-index: 1000;left: 75px;top: -340px; padding:0px; margin: 0px;width: 310px; height:280px; text-align: center; border:3px gray solid'></div>
I do not have control over the generated html I am looking to run javascript alongside a page as a greasemonkey extension to hide these two divs.
Thanks for any help you guys offer, I'm new to javascript so its a big help.
Use document.getElementsByTagName() to fetch all div elements. Then, check their id using maybe a regular expression like [0-9]{9,10} and if the id matches, remove/hide them.
You have two problems with your question.
First, you're suggesting that you have two divs with the same ID, which is illegal.
Secondly, your ID is all numeric, which is also illegal.
Here (using jquery for brevity and assuming you're getting your random from a dynamically generated page like from PHP) is an example of doing what you're looking for:
<script type="text/javascript">
var pRand = '<?php echo $pRand; ?>';
document.ready(function(){
$('.el-'+pRand).hide();
});
</script>
...
<div class="el-<?php echo $pRand;?>"></div>
<div class="el-<?php echo $pRand;?>"></div>
Use jQuery filter and provide a function that does a regex match on your id:
http://api.jquery.com/filter#expr
See here:
http://jsfiddle.net/ANW8C/
In your case...
Example:
$('div').filter(function() {
return this.id.match('\\d{9,10}');
} ).hide();
I suggest to you using jquery it has some selector filters that may help you to selecting correct div
http://api.jquery.com/category/selectors/
As others have said, you should first make sure you have legal ID values. They cannot start with a number and there can only be one object with a given ID in the page.
If you have any control over the generated HTML, it would be best to put a common class name on all divs that you want to hide. You can then easily find them or add a style rule that will hide them.
<div id='a1945498985' class="hideMe"></div>
<div id='a2945498986' class="hideMe"></div>
The, you can either hide all objects with that class name. In jQuery, that would simply be this:
$(".hideMe").hide();
Here are some examples - I haven't used jQuery because you haven't suggested that you are using it. It is very useful for this kind of stuff, but you can also solve the problem without it if you need to.
http://jsfiddle.net/Sohnee/tpGqj/
There are two methods used, one relies on a parent container and the other uses the new getElementsByClassName support that some browsers have (you can roll your own getElementsByClassName if you need to support older browsers).
Ideally, you wouldn't apply a random id to an element - there seems little point in giving an element a random id. If you are setting the random id server side, you could also supply the id to the JavaScript so it can target the element with a getElementById call, which would be the most efficient.
Also, I concur with the statements about numeric ids being invalid - you should put at least one alphabetical character at the start of the id.

choose javascript variable based on element id from jquery

I feel like this is a simple question, but I am still relatively new to javascript and jquery.
I am developing a site for a touch interface that uses unordered lists and jquery .click functions to take input data. I have a section to input a m:ss time, with 3 divs, each containing a list of digits for time. I need to get the input for each column and set it as a variable. I originally designed the inputs to change form inputs, because I didn't understand javascript very much. It was easy to change the 3 hidden inputs by using div id's, but I can't figure out how to do it now with javascript variables.
Here is my original jquery code...
$("div#time>div>ul>li").click(function() {
var id = $(this).parents(".time").attr("name");
var number = $(this).html();
$("input#"+id).val(number); });
The last line sets one of 3 hidden inputs equal to whatever was clicked. I need to make it so separate variables take the inputs, then I can manipulate those variables however I want.
Here's a short snippet of the html, to have an idea of how jquery grabs it.
<div id="time">
<h1>Time</h1>
<div name="minute" class="time" id="t_minute">
M :
<ul>
The full time html is here: link text
Thanks everyone!
I've been using SO to answer many questions I've had, but I couldn't find something for this, so I figured I would join, since I'm sure I will have more questions along the way.
So I have tried adding the following, and I still can't get it to work right.
window.myValues[id] = number;
event[i].min = myValues["minute"];
event[i].sec = myValues["second"];
event[i].sin = myValues["single"];
event[i].time = String(event[i].min) + String(event[i].sec) + String(event[i].sin);
I tried it both with and without the quotation marks. I have not used window.* for anything, so I'm not very sure how to handle this.
First thing to mention here, don't be unnecessary specific. In your example
$('#time').find('li').click()
should be enough.
If I understand you well, you want to store the some data. You might want to use
jQuery's $.data method. Example:
$('#time').find('li').click(function(){
var $this = $(this);
var name = $this.closest('.time').attr('name');
$.data(document.body, name, $this.html());
});
This would store the html of the clicked li in a global Object, which can be accessed like
alert($.data(document.body, 'minute'));
you should be able to reference the variable from the window[] object, so something like window[id] should do the trick for referencing the variable.

Categories

Resources