Jquery find不能处理AJAX返回数据

时间:2013-03-08 11:10:09

标签: jquery html ajax

function openFaceBox(path) {
    $.ajax({
        type: "GET",
        url: path,
        success: function( data ) {
            $.facebox( data ); // data returns html
                    var tableHeight = $(data).find('table').height();
                    console.log( tableHeight ); // Output : 0 (Zero)
        }               
    }); 
}

我的AJAX返回html如下:

<div id="holder-1">
    <h1>Content 1</h1>
</div>
<div id="holder-2">
    <h1>Content 2</h1>
</div>
<div id="holder-3">
    <h1>Content 3</h1>
</div>
<table>
    <tr>
        <td>abcd</td>
        <td>Some Text Here Some Text Here Some Text Here Some Text Here
            Some Text Here Some Text Here Some Text Here Some Text Here Some Text
            Here Some Text Here Some Text Here Some Text Here Some Text Here Some
            Text Here Some Text Here Some Text Here Some Text Here Some Text Here
            Some Text Here Some Text Here Some Text Here Some Text Here Some Text
            Here</td>
    </tr>
</table>

我无法弄清楚.find()无效的原因。基本上我想找到桌子高度。任何混乱请告诉我。

3 个答案:

答案 0 :(得分:3)

使用filter()

console.log($(data).filter('table'));

假设dataHTML的字符串,您可以这样做:

$(data).find('table');

这将返回table而不将数据添加到DOM

答案 1 :(得分:1)

您需要执行类似

的操作

注册reveal.facebox事件处理程序

$(document).on('reveal.facebox', function(){
    var tableHeight = $('#facebox .content table').height();
    //Do whatever you want with the height
});

function openFaceBox(path) {
    $.ajax({
        type: "GET",
        url: path,
        success: function( data ) {
            $.facebox( data ); // data returns html
                    var tableHeight = $(data).find('table').height();
                    console.log( tableHeight ); // Output : 0 (Zero)
        }               
    }); 
}

演示:Fiddle

注意:
$(data).find('table').height()将无效,因为此元素尚未呈现给dom,因此此元素没有高度/宽度。 一旦facebox项目被渲染,facebox将触发revleal.facebox事件,并且facebox内容默认呈现为#facebox .content元素。

答案 2 :(得分:0)

我不知道$ .facebox()是什么,但是在将元素加载到DOM之前,你将无法找到元素的高度。这有点疯狂,但它可以让你达到你的身高。

    $('body').append($('<div>',{class:'faceboxHolder'}).css('left':'5000px', 'position':'absolute').append(data));    

    var tableHeight = $('.faceboxHolder').find('table').height();

    $('.faceboxHolder').remove();