jquery - Jquery find 不适用于 AJAX 返回数据

Question

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()不工作。基本上我想找到桌子的高度。任何困惑请告诉我。

Answer 1

使用filter().

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

假设这data是一个字符串HTML，你可以这样做：

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

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

Answer 2

你需要做类似的事情

注册一个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)
        }               
    }); 
}

演示：小提琴

注意：
$(data).find('table').height()由于该元素尚未渲染到 dom，因此无法使用，因此该元素没有高度/宽度。一旦 facebox item 被渲染，facebox 就会触发一个revleal.facebox事件，并且 facebox 的内容默认渲染到#facebox .contentelement。

Answer 3

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

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

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

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