javascript - 当父链接为 (#) 时如何从第一个子项插入第一个子项的链接

Question

请告诉我如何在父 li 中插入第一个 child 的链接。

   <li class="parent">
            <a href="#">About</a>
                                <ul>
                   <li class="child">
                        <a href="About.html" title="About">About</a>


                    </li>
                                                                    <li class="child">
                        <a href="service.html" title="Staff">Service</a>


                    </li>
                                                                    <li class="child">
                        <a href="contact.html" title="Testimonials">Contact</a>


                    </li>

在脚本之后我想要那个结果

   <li class="parent">
            <a href="About.html">About</a>
                                <ul>
                   <li class="child">
                        <a href="About.html" title="About">About</a>


                    </li>
                                                                    <li 
      class="child">
                        <a href="service.html" title="Staff">Service</a>


                    </li>
             <li class="child">
           <a href="contact.html" title="Testimonials">Contact</a>


                    </li>

**请告诉我如何在父 li 中插入第一个 child 的链接。请检查并告诉我该怎么做

Answer 1

您可以使用attr 获取/设置属性并使用$(selector).find() 执行dom 元素查询。

$(document).ready(function() {
  $('.parent').each(function() {
    if($(this).find('>a').attr('href') === '#') { //requested added cond.
       $(this).find('>a').attr('href', $(this).find('>ul>li:first>a').attr('href'));
    }    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent">
  <a href="#">About</a>
  <ul>
    <li class="child">
    <a href="About.html" title="About">About</a>
    </li>
    <li class="child">
    <a href="service.html" title="Staff">Service</a>
    </li>
    <li class="child">
    <a href="contact.html" title="Testimonials">Contact</a>
    </li>
  </ul>
</li>
<li class="parent">
  <a href="nochange.html">Service</a>
  <ul>
    <li class="child">
    <a href="service.html" title="Staff">Service</a>
    </li>
    <li class="child">
    <a href="About.html" title="About">About</a>
    </li>
    <li class="child">
    <a href="contact.html" title="Testimonials">Contact</a>
    </li>
  </ul>
</li>