How to Check, if title attribute has content or not using jquery

Step1:

Welcome to designers dairy, here we are going to Check, if  the title attribute has content or not using
jquery


Step2:

Excepted Screen:







Step3:

Html Code:

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td title="hello">John</td>
        <td title =" "></td>
         <td><a href="#" title="July"> july </a></td>
      </tr>
      <tr>
            <td title="hello">John</td>
        <td title="  "></td>
     <td><a href="#" title="July"> july </a></td>
      </tr>
       
         <tr>
        <td title="hello">Mary</td>
        <td title="  "></td>
         <td><a href="#" title="July"> july </a></td>
      </tr>
      <tr>
           <td title="hello">John</td>
       <td title="  "></td>
          <td><a href="#" title="July"> july </a></td>
     
      </tr>
            <tr>
           <td title="hello">John</td>
         <td title="  "></td>
        <td><a href="#" title="July"> july </a></td>
      </tr>
    </tbody>
  </table>


Step4:

There are the two methods to check the attribute title has content or not.

                                           1. Each Method() .prop() method provides a way to explicitly retrieve property values
                                          2. Filter Method()


Let us see in the script 


<script>

$(document).ready(function()
{

      Step1 :- Method using filter option: 

       $("td").filter(function(){
        
        var tittleStatus = ($(this).attr('title') || "hello").trim().length==1;
        
        return $(this).find('a').length <= 0 && tittleStatus;   

            }).css("background-color", "red");
            

        });

      Step2 :-  Method using each and prop method option:

        $("td").each(function(){

           if($(this).prop("title").trim().length == 0 && $(this).prop("title")!= "") {

             $(this).css("background-color", "blue")
         
             }
            
            else {
                
                 $(this).css("background-color", "red");
            }
                             
        });

      Step3 :-  Simple Method using filter method:

          $("td").filter(function()
             {
         return ($(this).attr('title') || '').trim().length == 0  &&  $(this).find('a').length <= 0;
                

            }).css("background-color", "red")
 });

</script>


Step5:

To check if <img> tag has title attribute set:

if($("img#someID").attr("title") !== undefined) {
    // ....
}

To select images that have title attribute:

$("img[title]")

Note:

• Since jQuery 1.6 the attr() method returns undefined if the attribute was not present and ""if the attribute was present but empty
• In e arlier versions of jQuery the attr() method returns "" if attribute was not present or it was present but empty

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on Jquery.