CODEWITHSUNDEEP
javascriptjqueryhtml
TGuimond
TGuimond

Reputation: 5487

Find child of parent container using jquery

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

Upvotes: 1

Views: 4988

Answers (3)

Luca Filosofi
Luca Filosofi

Reputation: 31173

$(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> -->

Upvotes: 6

Peeter
Peeter

Reputation: 9382

$("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/

Upvotes: 1

manji
manji

Reputation: 47978

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

Upvotes: 1

Related Questions