Question

尝试在某些javascript代码中添加div。

以下是我要修改的代码：

slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');

      if (slider.pagingCount > 1) {
        for (var i = 0; i < slider.pagingCount; i++) {
          slide = slider.slides.eq(i);
          item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"/>' : '<a>' + j + '</a>';
          if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
            var captn = slide.attr( 'data-thumbcaption' );
            if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
          }
          slider.controlNavScaffold.append('<li>' + item + '</li>');
          j++;
        }
      }

以上是在<div class="container">之前添加<ol>并在上面的代码中</div>之后关闭</ol>代码后得到的结果...正如您可以看到列表关闭列表项之前进入内部：

<div class="container"><ol class="flex-control-nav flex-control-paging"></ol><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></div>

这是我想要输出的内容。

<div class="container"><ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li><li><a>3</a></li><li><a>4</a></li></ol></div>

无效的代码：

slider.controlNavScaffold = $('<div class="container"><ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol></div>');

  if (slider.pagingCount > 1) {
    for (var i = 0; i < slider.pagingCount; i++) {
      slide = slider.slides.eq(i);
      item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"/>' : '<a>' + j + '</a>';
      if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
        var captn = slide.attr( 'data-thumbcaption' );
        if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
      }
      slider.controlNavScaffold.append('<li>' + item + '</li>');
      j++;
    }
  }

Answer 1

您没有发布，但我怀疑您将第一行更改为

slider.controlNavScaffold = $('<div><ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol></div>');

这将导致代码完全按照您的描述执行，因为.append()调用将附加到外部元素（<div>）。

相反，在添加<li>元素之后，单独留下第一行，然后留在 end - 添加：

slider.controlNavScaffold.wrap( $('<div/>', { "class": "container" }) );

之后，为了让您在将实际内容添加到DOM时正常工作，您需要找到<ol>的父级，并确保这是您添加的内容：

slider.controlNavWrapper = slider.controlNavScaffold.parent();

（或者你想跟踪它）。

将div添加到javascript代码中

1 个答案: