使用jQuery ajax获取另一页的列表元素

我想通过jQuery的$ .ajax请求（没有ID）加载另一个网页的特定部分。使用jQuery ajax获取另一页的列表元素

简单的例子....

这里是例如HTML：

<div id="list"> 
    <ul> 
     <li>Foo 6</li> 
     <li>Foo 7</li> 
     <li>Foo 8</li> 
     <li>Foo 9</li> 
     <li>Foo 10</li> 
    </ul> 
</div>

还有一些例子JQ：

$("#more").on("click", function(event){ 
    $.ajax({ 
     url: 'foo.html', 
     datatype: 'html', 
     success: function (data) { 
      $('#list ul').append($(data).filter('#list').html()); 
     } 
    }) 
    event.preventDefault(); 
});

不过，我想指定的UL内#list ，但如果我将过滤器更改为'#list ul'，则无效。这让我疯狂。我如何定位这个元素？我试图使用查找而不是过滤器，但这并没有带回任何东西。

干杯

来源

2013-01-24 Adi

'nothing works'的意思是？你能看到任何错误吗？ –

这意味着该过滤器不工作，我猜。不是DOM节点的'.filter（）'函数，而你的数据是包装在jQuery对象中的'string'，不是吗？ – kidwon

你的数据怎么样了。在'li'里？ –

filter()如果目标选择是在根级别才有效，否则，你需要使用find()

$('#list ul').append($(data).find('#list ul').html());

或之后也将工作，但不会显示为有效的

$('#list ul').append($(data).filter('#list').children('ul').html());

来源

2013-01-24 12:55:55 charlietfl

尝试我的小提琴，你的第二个解决方案似乎不工作。我从来没有真正使用过滤器，所以也许我错过了一些小东西？ – mattdlockyer

更新提琴：http://jsfiddle.net/vKUD7/1/

<div id="container"> 
    <div> 
     <div id="list"> 
      <ul> 
       <li>Foo 6</li> 
       <li>Foo 7</li> 
       <li>Foo 8</li> 
       <li>Foo 9</li> 
       <li>Foo 10</li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div id="list2"> 
    <ul></ul> 
</div>

有了这个微不足道的代码，以模拟从其他页面返回的数据：

var data = $('#container').html(); 

$('#list2 ul').append($(data).find('#list ul').html()); 

//Doesn't work 
//$('#list2 ul').append($(data).filter('#list').children('ul').html());

对方的回答的第一部分，也是正确的，你必须使用发现递归遍历元素孩子，会发现你的分区ID，然后让你找到只在该div内的ul元素。

第二部分使用.filter和。孩子似乎没有工作...

希望这有助于！

来源

2013-01-24 12:58:32 mattdlockyer

使用jQuery ajax获取另一页的列表元素

回答

相关问题