jQuery技术:jquery在子ul-tag之前将html插入到列表中

我有这个:

  • 1
  • 2
  • 3
    • 3-1

但想要这个:

  
  • 1
  • 2
  • 3
    • 3-1

换句话说我需要插入

 
  • 在列表中的3之后。 我玩过.append和.prepend但是能够在正确的位置插入。

    任何帮助,将不胜感激

    BR。 安德斯


    下面有一个正确的答案。 如果你使用它,那么它将只运行一个级别。 但同样的例子是能够运行多个级别。 只需将(’> li> ul’)更改为(’ul’),即可找到并处理所有嵌套的ul。 完善!

    (将通过无尽级别的嵌套ul)

     $('#pickme').find('ul').each(function() { $(this).wrap('
  • ').parent().insertAfter($(this).parent().parent()); });

    在这种情况下:

      
    • 1
    • 2
    • 3
      • 3-1
        • 3-1-1

    将会:

      
    • 1
    • 2
    • 3
    • <<new li
      • 3-1
      • <<new li
        • 3-1-1

      这对你有用;

       // get the #pickme element var pickme = $('#pickme'); // find all the LI elements that are directly under #pickme var pickmeLIs = pickme.find('>li'); // find all the UL elements that are directly under our found LI elements var pickmeULs = pickmeLIs.find('>ul'); // loop through our UL elements pickmeULs.each(function() { // wrap this UL element in the new LI element $(this).wrap('
    • '); // select the wrapping LI we just added to the UL element var wrapingLI = $(this).parent(); // find our original parent LI element var originalParent = $(this).parent().parent(); // move this and the new wrapping LI to the right place wrapingLI.insertAfter(originalParent); });

      这可以简化为;

       $('#pickme').find('>li >ul').each(function() { $(this).wrap('
    • ').parent().insertAfter($(this).parent().parent()); });

      如果您有办法知道#pickme有多少列表项,您可以使用$('#pickeme li:eq(theIndex)')否则,请使用:

       $('#pickme li:last').after('
      • 3-1
    • ');

      经过测试和工作。

      UPDATE

      感谢bobince和Myra,我现在有以下内容,它正是您所要求的:

       $('#pickme li:last-child').replaceWith('
      • 3-1
    • ');

      输出:

       
      • 1
      • 2
        • 3-1

      最后一个子选择器将确保您在其后添加新项目。

      你可以用它作为

      $('

    • 4
    • ').appendTo("ul#pick_me > li:last-child");

      使用.html(),它将为您提供内部文本。 操纵字符串。 然后使用.html(newHtml)设置新的内部文本。

      prepend和append的问题是你不需要前置或追加,你需要在中间插入(在3之后)。

      需要了解更多jQuery教程分享jquery在子ul-tag之前将html插入到列表中,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

        以上就是jQuery教程分享jquery在子ul-tag之前将html插入到列表中相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

        本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

        ctvol管理联系方式QQ:251552304

        本文章地址:https://www.ctvol.com/jquerytutorial/982552.html

        (0)
        上一篇 2021年12月13日
        下一篇 2021年12月13日

        精彩推荐