IE7에서 JQuery 목록/링크 조작 오류 만

Question

다음 코드를 사용하여 HTML에서 후크를 찾고, 링크를 생성하고, 팝업을 작성하고 채우고,보기에서 후크를 숨 깁니다. 그것은 FF, 크롬, 사파리, IE8 및 IE9에서 잘 작동하지만 IE7에서는 실패합니다.

여기는 실제 유스 케이스에 대한 링크입니다. 재생시 비정상적인 CSS는 없습니다. 목록이 떠 다니지 않습니다. JQuery 1.7.1을 UI 버전 1.8.18과 함께 사용하고 있습니다. 기본 패키지 CSS는 대화는 : 사람이 내가이 오류를 닫을 수있는 방법을 지적 할 수 있다면

http://databizsolutions.ie/contents/page.php?v=35&u=admin-videos#a

, 나는 매우 감사하게 될 거라고. (TinyMCE에 의해 생성)

오리지널 HTML :

<h3>Title of list</h3> 
<ol> 
    <li>Call to action 1</li> 
    <ol> 
     <li>[popup]path/to/file1.mp4</li> 
    </ol> 
<li>Call to action 2</li> 
    <ol> 
     <li>[popup]path/to/file2.mp4</li> 
    </ol> 
<li>Call to action 3</li> 
    <ol> 
     <li>[popup]path/to/file3.mp4</li> 
    </ol> 
... 

JQuery와 : HTML의

$(document).ready(function(){ 

var num = 0; 

//Find [popup] instances, increment the number 
$("li:contains('[popup]')").each(function() { 
    var nextnumber = num++; 

    //add a general and a unique class to the list item containing the hook 
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber); 

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr 
    var splitpath = $(this).text().split("[popup]"); 
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path"); 
    //alert($(this).attr("path")); 

    //Get the previous list item (the call to action), and give it general and unique classes also. 
    $thisArrow = $(this).parent().prev(); 
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber); 

    //Make the call to action an anchor link, with a general class identifier. 
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>'); 

    //hide hooks 
    $('li.popup').parent().hide(); 
}); 

$('.opener').click(function() { 
    var Header = $(this).text(); 
    var popupURL = $(this).attr("path"); 
    var popupBG = "../contents/css/images/white-nontrans.jpg"; 

    var thisDialog = $('<div></div>') 
     .html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420"><param name="movie" value="../mediaplayer/player.swf"><param name="autostart" value="true"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#FFFFFF"><param name="wmode" value="opaque"><param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '"><embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" autostart="true" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" /></object>') 

    .dialog({ close: function() { $(this).html(''); },autoOpen: false, title: Header, modal: true, maxHeight: 500, width:580 }); 
    thisDialog.dialog('open'); 
    return false; 
}) 
}); 

원하는 결과 : IE7에서

<h3>Title of list</h3> 
<ol> 
    <li class="arrow arr0"> 
     <a class="opener" title="Click to view video" path ="path/to/file1.mp4" > 
      Call to action 1 
     </a> 
    </li> 
    <li class="arrow arr1"> 
     <a class="opener" title="Click to view video" path ="path/to/file2.mp4" > 
      Call to action 2 
     </a> 
    </li> 
    <li class="arrow arr2"> 
     <a class="opener" title="Click to view video" path ="path/to/file3.mp4" > 
      Call to action 3 
     </a> 
    </li> 
... 

:

<h3 class="arrow arr0 arr2 arr4 arr6 arr8 arr10">Title of list</h3> 
<a class="opener" title="Click to view video" path ="path/to/file1.mp4" > 
    <a class="opener" title="Click to view video" path ="path/to/file2.mp4" > 
     <a class="opener" title="Click to view video" path ="path/to/file3.mp4" > 
<ol> 
    <li>Call to action 1</li> 
    <ol> 
     <li>[popup]path/to/file1.mp4</li> 
    </ol> 
<li>Call to action 2</li> 
    <ol> 
     <li>[popup]path/to/file2.mp4</li> 
    </ol> 
<li>Call to action 3</li> 
    <ol> 
     <li>[popup]path/to/file3.mp4</li> 
    </ol> 
... 

,174,

Answer 1

나는 이것을 테스트하지 않았지만 이것이 HTML이 올바르지 않기 때문이라고 생각합니다. ol은 ol의 유효한 하위 요소가 아니며 li뿐입니다. 귀하의 HTML은 다음과 같아야합니다 :

<h3>Title of list</h3> 
<ol> 
    <li> 
     Call to action 1 
     <ol> 
      <li>[popup]path/to/file1.mp4</li> 
     </ol> 
    </li> 
    <li> 
     Call to action 2 
     <ol> 
      <li>[popup]path/to/file2.mp4</li> 
     </ol> 
    </li> 
    <li> 
     Call to action 3 
     <ol> 
      <li>[popup]path/to/file3.mp4</li> 
     </ol> 
    </li> 
</ol> 

IE는 매우 잘못된 HTML 형식입니다.