$(this).value

**TurtleWolf** · Feb 9, 2013 10:41

In my HTML I have a series of accordion tabs, all with the "twkTmr" class, but each may have a different value for the date. So I'm having trouble getting the right syntax to select $(this).value as an argument.

Code:

<h6 id="32" class="twkTmr ui-accordion-header ui-helper-reset" value="2013-01-12" >Property_Name</h6>
<h6 id="34" class="twkTmr ui-accordion-header ui-helper-reset" value="2013-01-22" >Property23</h6>

In my JavaScript

Code:

$(init);
function init(argument) {
	$("#addAproperty").click(addAproperty);
	$("#propertyManager").click(propertyManager);
	$("#submitbutton").click(openNewTkt);
	$(".shinybutton").button();
	$("#accordion").accordion({
		collapsible : true
		});
	$("#pinner").spinner({
		spin : function(event, ui) {
			if (ui.value > 300) {
				$(this).spinner("value", 1);
				return false;
			} else if (ui.value < 1) {
				$(this).spinner("value", 300);
				return false;
			}
		}
	});

$(".twkTmr").ready(function beRED (argument) {
  var value = 301;
  if (value > 300) {
  	 $(".twkTmr").addClass("red");
  	 }; 
	});

}

I have it at the end of an initialization function because it needs to happen @ page load and most of what I've read suggest $(this) has to be very picky about scope. So how do I pass $(this).value in as the argument. What I'm really wanting to do is add Class red to any divs that are over two weeks old.

**Pullo** · Feb 9, 2013 16:11

Hi there,

Maybe I'm missing something obvious, but wouldn't something like this work:

HTML Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>.warning{color:red}</style>
  </head>
  
  <body>
    <h6 id="32" class="twkTmr ui-accordion-header ui-helper-reset" value="2013-01-12" >Property_Name</h6>
    <h6 id="34" class="twkTmr ui-accordion-header ui-helper-reset" value="2013-01-22" >Property23</h6>
    <script>
      $(document).ready(function(){
        var today = new Date();
        var twoWeeksAgo = new Date(today - 12096e5);
        
        $(".twkTmr").each(function(){
          d = new Date($(this).attr("value"))
          if (d < twoWeeksAgo){
            $(this).addClass("warning")
          }
        });
      });
    </script>
  </body>
</html>

For an explination of the line var twoWeeksAgo = new Date(today - 12096e5);, see here: http://stackoverflow.com/questions/7...-weeks-14-days

**TurtleWolf** · Feb 9, 2013 18:12

Thank you, it probably will, I didn't go to college and am just cobbling all of this together from the internet and a few books. It is .each and .attr that I need to study up on now. I see how you used .attr to reach out to the value. and I'm assuming .each is short hand "for each" maybe. Are these in javascript it'self or being added by the JQuery library? Thank you again. Is there away I'm suppose to be up voting these answers or are most programmers just anxious to give away their knowledge?

**TurtleWolf** · Feb 9, 2013 18:20

Hey, I found your blog and after reading a few headlines shared it on my facebook, and 3 of those are programmers... so maybe another reader or two. Thanks again for pointing me in the right direction.

**Pullo** · Feb 10, 2013 06:32

Hi there,

Glad I could help.

Originally Posted by TurtleWolf

It is .each and .attr that I need to study up on now. I see how you used .attr to reach out to the value. and I'm assuming .each is short hand "for each" maybe.

.each() is quite a handy little method, let me elaborate:

Code JavaScript:

$(document).ready(function(){
  var today = new Date();
  var twoWeeksAgo = new Date(today - 12096e5);
 
  $(".twkTmr").each(function(){
    d = new Date($(this).attr("value"))
    if (d < twoWeeksAgo){
      $(this).addClass("warning")
    }
  });
});

First off we are waiting for the document to finish loading.
As long as you put your JavaScript before your closing <body> tag, this isn't strictly necessary, but I usually stick everything within $(document).ready(function(){...}); anyway.

The next two lines create two new Date objects and store them in variables for later reference.

Then we grab every element on the page with a class of "twkTmr".
This returns a jQuery object known as the "wrapped set," essentially an array-like structure that contains all the selected DOM elements.

Then using .each() we can iterate over the elements we have selected and apply an anonymous function to them.
Within this function $(this) is a jQuery object referring to the current element.

Within the function we create a further Date object, based on the element's "value" attribute, then compare this new Date object to the Date object we created earlier.
If need be we apply a class of "warning" to it.

Originally Posted by TurtleWolf

Are these in javascript it'self or being added by the JQuery library?

Most of this is syntactic sugar added by jQuery.
Anything you can do in jQuery, you can also do in JavaScript, but in this case I prefer the jQuery syntax.
In my opinion, it makes the code easier to read.

Originally Posted by TurtleWolf

Is there away I'm suppose to be up voting these answers or are most programmers just anxious to give away their knowledge?

You can't up-vote. Giving away knowledge is what its all about

Originally Posted by TurtleWolf

Hey, I found your blog and after reading a few headlines shared it on my facebook, and 3 of those are programmers... so maybe another reader or two.

Thank you. I appreciate that!