JQUERY 当 <UL> <LI> 具有内部 DIV 结构时附加问题

Question

好的，接下来是：

我有一个不那么奇怪的 JQUERY 问题。至少我认为我是。我的基础 HTML 代码是一个奇特的 <DIV> <UL> <LI> 结构（如下所示）。每个 LI 也有它自己的内部 DIV 结构。

这些都是使用 Flexslider 解决方案（几年前）的样式。当我直接使用它时效果很好，但我正在尝试使用 SP 列表将其转换为 JQUERY。

快速说明：这是 O365 SP 而非 On-Prem

工作原理的一些背景：

来自 SharePoint 的列表数据很好地到达，当我做简单的 JQUERY .HTML(myHtml) 它正确地显示在页面上。
当我只使用没有 JQUERY 的内联代码进行虚拟测试时，基本的 Flexslider 工作得很好。

当我尝试使用 .HTML(myHtml) 或 .APPEND(myHTML) 将数据应用于 <LI> 结构时不起作用。我猜这是因为 <LI> 结构有多个内部 DIV 并且不知何故我的附加逻辑错误。

这是 HTML 的样子（带有样本数据）

<div class="page-content-wrapper">
  <div class="flexslider carousel">
    <ul class="slides">
      <li>
        <div class="fleximage lcol">
          <a href="#"><img src="/DoingGood.jpg" alt="" /></a>
        </div>
        <div class="flexcaption rcol">
          <div class="headline">TITLE!</div>
          <div class="teaser">BLURB</div>
        </div>
      </li>
    </ul>
  </div>
</div>

上面的代码在插入页面时就可以正常工作。当我尝试使用下面的 JQUERY 时出现问题。

function onQuerySucceeded(sender, args) {
  var listItemInfo = '';
  var listItemEnumerator = collListItem.getEnumerator();
  while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    listItemInfo += '<li><div class=\"fleximage lcol\"><img src=\"' + oListItem.get_item('ImageURL') + '\"></div> <div class=\"flexcaption rcol\"> <div class=\"headline\">' + oListItem.get_item('Title')+'</div> <div class=\"teaser\"> ' + oListItem.get_item('Blurb') + '</div> </div></li> '; 
  }
  alert(listItemInfo);
  $(".slides").html(listItemInfo);
}

基本上我在使用它时没有得到任何输出。正如预期的那样，ALERT 向我显示了我的数据。我猜这是因为 LI 中 '''DIV''' 标签的结构，我需要不同的输出方法？

这是 listItemInfo 变量的警报消息输出示例：

<li>
<div class="fleximage lcol"><img src="./Lexington/SiteCollectionDocuments/DoingGood.jpg"/></div>
<div class="flexcaption rcol">
<div class="headline">Test Stephen!</div>
<div class="teaser"> test</div>
</div>
</li>

<li>
<div class="fleximage lcol"><img src="./Lexington/SiteCollectionDocuments/DoingGood.jpg"/>
</div>
<div class="flexcaption rcol">
<div class="headline">Test 3 Steve</div>
<div class="teaser"> Tesst 4</div>
</div>
</li>```

Answer 1

在我的在线环境中运行的测试演示。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
    <link rel="stylesheet"
          type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css" />

    <script type="text/javascript">
        $(function () {
            ExecuteOrDelayUntilScriptLoaded(myfunction, "sp.js");
        });
        function myfunction() {
            var clientContext = new SP.ClientContext.get_current();
            var oList = clientContext.get_web().get_lists().getByTitle('Slider');

            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
                '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
            this.collListItem = oList.getItems(camlQuery);
            clientContext.load(collListItem);
            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
        }
        function onQuerySucceeded(sender, args) {
            var listItemInfo = '';
            var listItemEnumerator = collListItem.getEnumerator();
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                listItemInfo += '<li><div class=\"fleximage lcol\"><img src=\"' + oListItem.get_item('ImageURL').get_url() + '\"></div> <div class=\"flexcaption rcol\"> <div class=\"headline\">' + oListItem.get_item('Title') + '</div> <div class=\"teaser\"> ' + oListItem.get_item('Blurb') + '</div> </div></li> ';
            }
            //alert(listItemInfo);
            $(".slides").html(listItemInfo);
            $('.flexslider').flexslider({
                animation: "slide",
                rtl: true,
                start: function (slider) {
                    $('body').removeClass('loading');
                }
            })
        }

        function onQueryFailed(sender, args) {

            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    </script>
    <div class="page-content-wrapper">
        <div class="flexslider" style="direction:rtl">
            <ul class="slides"></ul>
        </div>
    </div>

JQUERY 当 <UL> <LI> 具有内部 DIV 结构时附加问题

JQUERY Append issue when working with <UL> <LI> when the <LI> has inner DIV Structures

jquery

html-lists

sharepoint-online