如何通过触发函数的元素的父div的类名获取另一个子元素

Question

my problem sounds pretty simple. I have divs with no id and class specified like this

<div style="position:relative; float:left">
    <input type="text" onfocus="renderCalendar(event);" size="50" id="cal" name="cal">
    <div class="wrappercal calwrapper">
        <div class="yearmonth">
            <table class="caltable"><tbody>
            <tr><th width="80%" scope="col" colspan="5">
                <select class="dtcombo year" onchange="changeCalendar()">
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                </select>&nbsp;&nbsp;
                <select onchange="changeCalendar()" class="dtcombo month">
                    <option value="1">1</option>
                    <option value="2">2</option>
                 </select></th>
              </tr>
              </tbody>
              </table>
         </div>
     </div>
</div>

There may be several similar divs in the page

I have a javascript function

function renderCalendar(event){
    var triggerer=event.target.id; // THIS WILL GIVE THE ID OF TEXTBOX THAT TRIGGERED THIS FUNCTION.
  $("#"+triggerer).parent().children(".wrappercal").children(".yearmonth").children(".caltable").children(".year").val(); //not working
}

The nest follows like this

  Parent Div > wrappercal(div) > yearmonth(div) > caltable(table) > year(select)

my problem is to get value of combo with class "year" of the parent div of textbox that triggered the function.

Can anybody figure out where i went wrong? any suggestions?

PS Please bear I m not good with dom elements.

Thanks

Answer 1

Why not try this?

function renderCalendar(event){
    $(event.target).parent().find(".wrappercal .yearmonth .caltable .year").val(); 
}

Can you check (using console.log(event.target) and tracking) that the target element is really what/where it should be?

EDIT

The problem is that children() only searches through one level (deep) of child nodes and there is multiple levels between .caltable and .year ( <tr><th>... ). Use find() instead (which will search recursively through your nodes). ;-)

See this for more info.

Answer 2

Try the Following

         function renderCalendaer(event) {

           $("#"+event.target.id).parent().find(".year").val();   

                   }

Answer 3

你可以试试

$("#"+triggerer).parent().find(".year").val() instead.