使用jQuery查找父容器的子级

Question

I am probably looking at this the wrong way, but I am having trouble locating an element within my page and am hoping someone can help.

The scenario is this: I have a <ul> containing a number of <li>'s which in turn contain <a href>'s . I am getting the value of the rel attribute of the clicked <a href> and want to replace the text in a <span class='someclass'> which is located in a parent container. There may be more than one of these <span class='someclass'> on the page so I need to find the closest one.

Here is how my HTML looks

<h3 class="my-header-class">
   <span class="some-class">Title Text</span>
 </h3>
 <ul class="tabs">
   <li><a rel="Title Text 1" href="#tab1">Link 1</a></li>
   <li><a rel="Title Text 2" href="#tab2">Link 2</a></li>
   <li><a rel="Title Text 3" href="#tab3">Link 3</a></li> 
 </ul>

Here is my javascript

 var titletext = $(this).attr('rel');
 var container = $(this).parent().children(".some-class");      
 container.text(titletext);

The titletext variable is being set with the correct text but I am unable to replace the text of the <span class='someclass'> . I assume because I am not finding it correctly.

Thanks, Tristan

Answer 1

$(this).parent().parent().prev().children(".some-class");


 <h3>     <!-- PREV OF UL -->
  <span>  <!-- CHILDREN OF H3 -->

 <ul>     <!-- PARENT OF <LI> AND <A> -->
  <li>    <!-- PARENT OF <A> AND CHILDREN OF <UL> -->
   <a>    <!-- CHILDREN OF <UL> AND <LI> -->

Answer 2

$(this).parent().parent().prev('h3').children(".some-class")

Answer 3

$("ul.tabs a").click(function() {
    var titletext = $(this).attr('rel');
    $(this).closest("ul.tabs").prev().find(".some-class").text(titletext);
});

Working example: http://jsfiddle.net/peeter/67vTV/