如何修复Blogger中JavaScript中的匹配结束标记错误？

Question

我正在使用此代码在Blogger中使用JavaScript创建按字母顺序排列的无序列表。这适用于CodePen和JSFiddle，但是当我在Blogger中使用它时，保存时出现此错误：Error parsing XML, line 1007, column 3: The element type "li" must be terminated by the matching end-tag "".。它是指这条线：$this.before('<li class="splitter">' + firstLetter);。如何去解决这个问题？

var list = $('ul'), 
 
    items = $('li', list); 
 

 
// sort the list 
 
var sortedItems = items.get().sort(function(a, b) { 
 
    var aText = $.trim($(a).text().toUpperCase()), 
 
     bText = $.trim($(b).text().toUpperCase()); 
 
    
 
    return aText.localeCompare(bText); 
 
}); 
 

 
list.append(sortedItems); 
 

 
// create the titles 
 
var lastLetter = ''; 
 
list.find('li').each(function() { 
 
    var $this = $(this), 
 
     text = $.trim($this.text()), 
 
     firstLetter = text[0]; 
 

 
    if (firstLetter != lastLetter) { 
 
    $this.before('<li class="splitter">' + firstLetter); 
 
    lastLetter = firstLetter; 
 
    } 
 
});

.splitter { 
 
    border-top: 1px solid; 
 
    font-size: 1.25em; 
 
    list-style: none; 
 
    padding-top: 10px; 
 
    text-transform: uppercase; 
 
    padding-bottom: 10px; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#/"> john-doe/</a></li> 
 
    <li><a href="#/"> jane-doe/</a></li> 
 
    <li><a href="#/"> glen-doe/</a></li> 
 
    <li><a href="#/"> daniel-doe/</a></li> 
 
    <li><a href="#/"> matthew-doe/</a></li> 
 
</ul>

Answer 1

将Javascript代码与CDATA标签，以防止它解释Blogger的XML解析器。

//<![CDATA[ 

var list = $('ul'), 
    items = $('li', list); 

// sort the list 
var sortedItems = items.get().sort(function(a, b) { 
    var aText = $.trim($(a).text().toUpperCase()), 
     bText = $.trim($(b).text().toUpperCase()); 

    return aText.localeCompare(bText); 
}); 

list.append(sortedItems); 

// create the titles 
var lastLetter = ''; 
list.find('li').each(function() { 
    var $this = $(this), 
     text = $.trim($this.text()), 
     firstLetter = text[0]; 

    if (firstLetter != lastLetter) { 
    $this.before('<li class="splitter">' + firstLetter); 
    lastLetter = firstLetter; 
    } 
}); 

//]]>