Question

好的，所以去：

我有一个不太奇怪的JQUERY问题。至少我认为我是。我的基本HTML代码是精美的<DIV> <UL> <LI>结构（如下所示）。每个LI都有自己的内部DIV结构。

这些都是使用Flexslider解决方案的样式（已有几年历史了）。当我直接内联使用它时，它的效果很好，但是我试图使用SP列表将其转换为JQUERY。

快速说明：这是O365 SP，不是本地

有关有效方法的一些背景：

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

不起作用的是，当我尝试使用<LI>或.HTML(myHtml)将数据应用于.APPEND(myHTML)结构时。我的猜测是，因为<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);
}

使用此工具时，基本上没有输出。警报显示了我的数据，正如预期的那样。我猜是因为LI中''DIV'''标签的结构，我需要一种不同的输出方法吗？

以下是来自ALERT消息的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>

当<LI>具有内部DIV结构时，与<UL> <LI>一起使用时，JQUERY附加问题

1 个答案: