jquery - 我如何获得一个特定的父元素取决于它的子元素，并改变它的内容 - jquery？

Question

好吧，它有点复杂，我无法找到正确的方法来让它工作，我用一些例子来解释它：我生成的导航看起来像这样：

 <ul class='cat-nav'>
     <li class="c1">
        <h1>
           <a href="catalog.php?catid=8">main category 1</a>
        </h1>
     </li>
     <li class="c2">
        <h1>
           <a href="catalog.php?catid=9">main category 2</a>
        </h1>
           <ul class='subcat-nav'>
               <li>
                  <h1>
                     <a href="catalog.php?catid=7">main cat 2 - 1st subcat</a>
                  </h1>
               </li>
               <li>
                  <h1>
                     <a href="catalog.php?catid=19">main cat 2 - 2nd subcat</a>
                  </h1>
               </li>
           </ul>
      </li>
 </ul>           

现在我想做的是找到里面有子猫的李

（意思是里面有另一个 ul ）并禁用它的链接，这样主猫只会播放一个标题而不是实际的链接。

到目前为止，我已经尝试了以下但没有成功

$(document).ready(function() {
$('ul.cat-nav li').each(function() {    
    if($(this).children('ul').length == 1) {
    $('a').replaceWith(function() { return $(this).contents(); });  
    }
});
});

这个脚本禁用了 ul.cat-nav 中的所有链接，这对我来说是错误的......

Answer 1

.subcat-nav直接选择，使用.siblings()定位到<h1>，使用.find()定位到子<a>级，然后调用你的函数使它只有一个标题。请参阅jQuery 的 DOM 遍历技术的完整列表以获取更多有用的功能。

$(document).ready(function() {
    $('ul.cat-nav li ul.subcat-nav')
        .siblings('h1')
        .find('a')
        .replaceWith(function() { return $(this).contents(); }); 
});

Answer 2

试试这个

$(document).ready(function() {
    $('ul.subcat-nav').each(function() {  // start from subcat-nav  
        $(this).parent().find('h1:first a')
            .replaceWith(function() { // your code
                return $(this).contents();
            });

    });
});