同时从无序列表中定位无序列表和项目

时间:2012-12-06 02:10:36

标签: javascript css html-lists positioning

我在将demo中的ul元素和箭头定位在一起时遇到问题。我无法在<div id="ytplayer_div2"></div>之间添加<ul>代码,因为来自demo page来源之下的javascript端的ID为ytplayer_div2的元素。即使我把它放在这些我也无法找到任何解决方案 <div id="ytplayer_div2"></div>标签内的内容来自:

      function ytplayer_render_playlist( )
  {
    for ( var i = 0; i < ytplayer_playlist.length; i++ )
    {
      var img = document.createElement( "img" );
      img.src = "track_arrow.gif";
      var a = document.createElement( "a" );
      a.href = "#ytplayer";
      a.onclick = (
        function( j )
        {
          return function( )
          {
            ytplayer_playitem = j;
            ytplayer_playlazy( 0 );
          };
        }
      )( i );
      a.appendChild( img );
      document.getElementById( "ytplayer_div2" ).appendChild( a );
    }
  }

简而言之,demo我怎么能这样做picture

1 个答案:

答案 0 :(得分:1)

<ul>提供 id ,例如<ul id="mylist">,然后在你的函数的开头获取它的所有<li>直接孩子,

var arrOfListNodes = Array.prototype.filter.call(document.getElementById('mylist').childNodes, function (e) {return e.tagName === 'LI';});

并在功能结束时而不是附加到ytplayer_div2,请执行

arrOfListNodes[i].insertBefore(a, arrOfListNodes[i].firstChild);

由于您的风格(float: left;中其他元素的<li>),箭头将显示在右侧,但现在位于DOM树的正确部分。