SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: $(this).value

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Glad I could help.

    Quote Originally Posted by TurtleWolf View Post
    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.

    Quote Originally Posted by TurtleWolf View Post
    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.

    Quote Originally Posted by TurtleWolf View Post
    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

    Quote Originally Posted by TurtleWolf View Post
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •