SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [jQuery] - how to identify missing vs empty attribute value

    This may be a simple one, but maybe not ...

    In jQuery I have a function that is used to alert user to missing alt attributes:

    Code:
    var alt = $(this).attr("alt");
     if(alt==undefined) {
    }
    The thing is, that code (alt==undefined) is true for:


    • missing alt attribute
    • alt attribute present but empty, e.g. alt=""


    I've had a look through some jQuery resources and I cannot find what I'm after which is something like this:

    Code:
    if (alt exists) {
     if (alt="") {
     //alt is empty
     }
     else {
     //alt has this value ...
        }
     }
    else {
     //no alt present
    }
    So there are three scenarios I need to match, not just 2. Hope this makes sense ... and that someone knows how I can achieve this using jQuery!
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure if there is a function to achieve this but you can "cheat" by looking for the "alt=" text within a variable which contains the html of the img.

    Try this out:

    Code JavaScript:
    $('img').each(function(){
       $(this).wrap('<span></span>');
       var html = $(this).parent().html();
       var alt = html.match( /alt=/ );
       if(alt==null) {
          alert('THERE IS NO ALT ATTRIBUTE');
       } else {
          if($(this).attr('alt')) {
              alert('ALT ATTRIBUTE IS FILLED! yay!');
          } else {
              alert('ALT ATTRIBUTE IS EMPTY');
          }
       }
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    I am not sure if there is a function to achieve this but you can "cheat" by looking for the "alt=" text within a variable which contains the html of the img.
    I like your thinking - that certainly works (tried it, tested it), but if there is a more refined way to do I'd still like to hear. For now, though, this works ver nicely :-)
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Well the standard way is to use the getAttribute method
    Then you can use code such as

    Code javascript:
    alt = this.getAttribute('alt');
    if (alt === null) {
        // not there
    } else if (alt === '') {
        // empty
    } else {
        // has value
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, your method doesn't seem to work in IE7...

    Code html4strict:
    <img />
    <img alt="" />
    <img alt="ss" />

    Code JavaScript:
    $('img').each(function(){
     alt = this.getAttribute('alt');
     if (alt === null) {
       alert('null')
      } else if (alt === '') {
       alert('empty')
      } else {
       alert('there')
      }
    });

    Each alert should come up once, but instead the "empty" alert is coming up twice and the "there" alert comes up once...

    It works in Firefox and Opera.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Well the standard way is to use the getAttribute method
    Then you can use code such as

    Code javascript:
    alt = this.getAttribute('alt');
    if (alt === null) {
        // not there
    } else if (alt === '') {
        // empty
    } else {
        // has value
    }
    I would use getAttribute if it was 'roll-my-own' JavaScript, but I tried that and it didn't work (most likely it was a scoping issue - as in it didn't know what 'this' is).

    Anyway, not to worry, I have a working solution for now :-)
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  7. #7
    @php.net Salathe's Avatar
    Join Date
    Dec 2004
    Location
    Edinburgh
    Posts
    1,397
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    <html>
    	<head>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    		<script type="text/javascript">
    			jQuery(function($){
    				$("body").append($("<ul>"));
    				$("img").each(function(){
    					var $this = $(this), text = "";	
    					if (this.hasAttribute("alt") === false)
    						text = " has no alt attribute";
    					else if ($this.attr("alt") === "")
    						text = " has an empty alt attribute";
    					else
    						text = " has an alt attribute of '"+$this.attr("alt")+"'";
    					$("<li>").text($this.attr("id")+text).appendTo($("ul"));
    				});			
    			});
    		</script>
    	</head>
    	<body>
    		<img id="test_alt" alt="test" />
    		<img id="no_alt" />
    		<img id="empty_alt" alt="" />
    	</body>
    </html>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Paul, your method doesn't seem to work in IE7...
    Yes IE7 has some special issues there. Salathe seems to have a nice solution.
    Last edited by paul_wilkins; Jun 17, 2008 at 14:15.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but Salathe's doesn't seem to work in IE7 either...

    There are some interesting solutions discussed here: http://tobielangel.com/2007/1/11/att...ightmare-in-ie
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •