jQuery：在堆疊的UL中選擇父級兄弟元素

Question

這真是讓我瘋狂！我不是真正的開發人員，但必須有一個簡單的方法來實現我想要的。我正在爲此工作數小時，但也許有些技術人員可以幫助我解決這個問題。

情況：

我有在子菜單標題嵌套UL列表（H3類= 「subMenuHeader」）。

帶有「subMenuHeader」類的每個h3都應該填入前一個錨文本的鏈接名稱（例如「Foo」）。

它應該如何工作

<ul> <!-- First Level --> 
    <li> 
    <a> Foo </a> 

    <ul> <!-- Second Level --> 
     <h3 class="subMenuHeader"> Foo </h3> 
     <li> 
     <a> Bar </a> 

     <ul> <!-- Third Level --> 
      <h3 class="subMenuHeader"> Bar </h3> 
      <li> 
      <a>Whoop</a> 
      </li> 
     </ul> 

     </li> 
    </ul> 

    </li> 
</ul> 

我已經嘗試了所有組合中的「.subMenuHeader」級的前選擇（一） - 標籤，但似乎是一個嚴重的問題在我的邏輯中。

作爲一個真正的jQuery的菜鳥我已經試過這樣的事情：

var x = jQuery(".subMenuHeader").closest('ul').parent('li').find('a').text(); 

jQuery('.subMenuHeader').text(x); 

但正如你所看到的，這ulitmately不起作用。它實際上顯示任何（a）的所有文本都遵循該選擇，並且不減少/特定內容，它在DOM中的深度越大。我總是以（a）文字的巨大字符串結束......

任何想法？

Answer 1

你應該試試這個.........

jQuery('.subMenuHeader').each(function() { 
    $(this).html($(this).parent().siblings('a').html()); 
}); 

（如果要頁面加載然後如下後更改的內容）

jQuery(function(){ 
     jQuery('.subMenuHeader').each(function() { 
      $(this).html($(this).parent().siblings('a').html()); 
     }); 
    }); 

Answer 2

您可以使用closest()獲得第一li父然後瞄準第一a內側find()和:first

$('.subMenuHeader').each(function() { 
 
    $(this).text($(this).closest('li').find('a:first').text()) 
 
})

h3 { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> <!-- First Level --> 
 
    <li> 
 
    <a> Foo </a> 
 
    <ul> <!-- Second Level --> 
 
     <h3 class="subMenuHeader"></h3> 
 
     <li> 
 
     <a> Bar </a> 
 
     <ul> <!-- Third Level --> 
 
      <h3 class="subMenuHeader"></h3> 
 
      <li> 
 
      <a>Whoop</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 3

幾種方法進行調整：

使用first

var x = jQuery(".subMenuHeader").closest('ul').parent('li').find('a:first').text();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> <!-- First Level --> 
 
    <li> 
 
    <a> Foo </a> 
 

 
    <ul> <!-- Second Level --> 
 
     <h3 class="subMenuHeader"> Foo </h3> 
 
     <li> 
 
     <a> Bar </a> 
 

 
     <ul> <!-- Third Level --> 
 
      <h3 class="subMenuHeader"> Bar </h3> 
 
      <li> 
 
      <a>Whoop</a> 
 
      </li> 
 
     </ul> 
 

 
     </li> 
 
    </ul> 
 

 
    </li> 
 
</ul>

使用prev()或siblings()獲得UL的前兄弟

var x = jQuery(".subMenuHeader").closest('ul').prev('a').text();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> <!-- First Level --> 
 
    <li> 
 
    <a> Foo </a> 
 

 
    <ul> <!-- Second Level --> 
 
     <h3 class="subMenuHeader"> Foo </h3> 
 
     <li> 
 
     <a> Bar </a> 
 

 
     <ul> <!-- Third Level --> 
 
      <h3 class="subMenuHeader"> Bar </h3> 
 
      <li> 
 
      <a>Whoop</a> 
 
      </li> 
 
     </ul> 
 

 
     </li> 
 
    </ul> 
 

 
    </li> 
 
</ul>