Question

我可能以错误的方式看待这个问题，但我在页面中查找元素时遇到问题，希望有人可以提供帮助。

场景是这样的：我的<ul>包含一些<li>'s，其中包含<a href>'s。我获取了所单击的<a href>的rel属性的值，并希望替换位于父容器中的<span class='someclass'>中的文本。页面上可能有多个<span class='someclass'>，所以我需要找到最近的一个。

以下是我的HTML外观

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

这是我的javascript

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

使用正确的文本设置titletext变量，但我无法替换<span class='someclass'>的文本。我假设是因为我找不到它。

谢谢，特里斯坦

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);
});

使用jquery查找父容器的子代

3 个答案:

工作示例：http://jsfiddle.net/peeter/67vTV/