2017-10-28 119 views
0

這真是讓我瘋狂!我不是真正的開發人員,但必須有一個簡單的方法來實現我想要的。我正在爲此工作數小時,但也許有些技術人員可以幫助我解決這個問題。jQuery:在堆疊的UL中選擇父級兄弟元素

情況:

我有在子菜單標題嵌套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)文字的巨大字符串結束......

任何想法?

回答

0

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

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

(如果要頁面加載然後如下後更改的內容)

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

給這個人一個cookie :-) 工作就像一個魅力! – Tim

0

您可以使用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>

0

幾種方法進行調整:

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