$(this).value

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.


<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


$(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.

Hi there,

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

<!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/7751936/javascript-date-plus-2-weeks-14-days

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?

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.

Hi there,

Glad I could help.

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

$(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.

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.

You can’t up-vote. Giving away knowledge is what its all about :slight_smile:

Thank you. I appreciate that!