Question

How can I apply the class ‘arrow’ to the div ‘arrow_container’ when the li is hovered over?

HTML

<ul id="main_bar_menu" class="menu">
      <li>
          <div class="arrow_container arrow"></div>
          <a href="#">Dockage</a>
      </li>
      <li>
          <div class="arrow_container arrow"></div>
          <a href="#">Something else</a>
      </li>
 </ul>

JQuery
jQuery(document).ready(function() {

    jQuery("#main_bar_menu li").hover(function() {
        jQuery(this).addClass('arrow');
    },
        function() {
            jQuery(this).removeClass('arrow');  
        });
});     

Answer 1

Like this man

http://jsfiddle.net/Z9YJk/1/

you can find any element within a jquery iteration with .find, you can also use .closest etc

Look for jquery tree traversal.

http://api.jquery.com/find/