How to run each on each html element

Question

I have an html table inside a div, and i want to run jquery on each li element or the li class and alert his id.

this is the html code. this is the html code.

HTML:

    <div id="lightbox_tlbr" style="top: 273px; display: block;">
   <div id="test">
      <div class="header_div" id="first_header"></div>
      <div class="header_div" id="second_header"></div>
      <div class="header_div" id="third_header"></div>
      <div class="header_div" id="fourth_header"></div>
   </div>
   <li class="announcement_tlbr" id="announcement7">
      <table id="tg_toolbar7" class="tg_toolbar">
         <tbody>
            <tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
               <th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
               <th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
               <td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
            </tr>
            <tr id="tg_text97">
               <td colspan="2" class="tg_text" id="tg_text37"></td>
            </tr>
            <tr class="r2_toolbar" id="tg_text47">
               <td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
               <td class="tg_toolbar-031e" id="tg_text67"></td>
               <td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
            </tr>
         </tbody>
      </table>
   </li>
   <li class="announcement_tlbr" id="announcement5">
      <table id="tg_toolbar5" class="tg_toolbar">
         <tbody>
            <tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
               <th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
               <th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
               <td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
            </tr>
            <tr id="tg_text95">
               <td colspan="2" class="tg_text" id="tg_text35"></td>
            </tr>
            <tr class="r2_toolbar" id="tg_text45">
               <td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
               <td class="tg_toolbar-031e" id="tg_text65"></td>
               <td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
            </tr>
         </tbody>
      </table>
   </li>
   <div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>

i try:

jQuery.each(".announcement_tlbr", function(k,v){  alert(k); })

what is a good way to do this?

Answer 1

$(document).ready(function() {
    $(".announcement_tlbr").each(function(){ 
       alert($(this).attr("id")) 
    }); 
});

Answer 2

You should use this inside each to get the reference of current element.Try this:

jQuery.each(".announcement_tlbr", function(e){
  alert($(this).attr('id'));//or this.id 
});