javascript - Find child of parent container using jquery - Stack Overflow

admin管理员组

文章数量:1333710

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 15, 2011 at 9:56 manji 48k55 gold badges9797 silver badges104104 bronze badges asked Apr 15, 2011 at 9:50 TGuimondTGuimond 5,49766 gold badges4343 silver badges5151 bronze badges 3

• try to edit your question correctly to get answers, it was unreadable (all html tags were stripped) – manji Commented Apr 15, 2011 at 10:00
• @manji: It looks fine to me..? – TGuimond Commented Apr 15, 2011 at 10:09
• 2 because I edited your question... – manji Commented Apr 15, 2011 at 10:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

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

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

本文标签： javascriptFind child of parent container using jqueryStack Overflow