Question

在一个HTML页面（From.htm）上我有：

<table class="Contents Stylize General">
    <tr>
        <td class="ProductName">
            <a href="http://mysite/products/product1.html">Product 1</a>
        </td>
        <td align="center" class="ItemQuantity">
            <span style="padding: 0; margin: 0;"><input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/></span>
        </td>
    </tr>

    <tr>
        <td class="ProductName">
            <a href="http://mysite/products/product2.html">Product 2</a>
        </td>
        <td align="center" class="ItemQuantity">
            <span style="padding: 0; margin: 0;"><input type="text" size="2" name="qty[4df7c1555b823]" id="text_qty_4df7c1555b823" class="qtyInput quantityInput" value="4"/></span>
        </td>
    </tr>
</table>

在调用页面（index.htm）中我有：

<script>
    function handle(element) {
        $(element).each(function() {
            var MyHref      = TheHref         //http://mysite/products/product1.html
            var MyHrefInner = TheHrefInner    //Product 1
            var MyQty       = TheQty          //The quantity of <input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/>
        });
    }

    $(function(){
        var table = $('<table/>');
        table.load('From.htm .Contents.Stylize.General', function(){handle(table);});
    });
</script>

我不知何故，需要获取From.htm中显示的每个产品的handle函数中显示的值。

请记住，From.htm中我唯一知道的是类名。我不知道列出了什么产品或输入名称是什么。该表由第三方生成。

假设index.htm和From.htm位于同一网站上。

Answer 1

这是一个适用于给定html的解决方案：

function handle(table){
    table.find('tr').each(function(){
        var text = $(this).find('td:first').text();
        var href = $(this).find('td:first a:first').attr('href');
        var qty = $(this).find('td:last input:first').val();
        $('#test').append('<li> text:' + text + '   href: ' + href + '  qty: ' + qty+ '</li>');
    } );

}

现在我只是将它附加到名为#test的ul ...但你可以用这些值做任何你喜欢的事。

这是一个小提琴：

http://jsfiddle.net/WdBUs/

Answer 2

~~我没有测试过它，但它应该可以解决问题。~~

更新：抱歉，$ .get处理错误。我期待得到一个对象，但它只是简单的HTML。最好的解决方案是创建一个临时元素，将html推入其中并使用jQuery进行常规搜索。句柄功能保持不变。

$.get('From.htm', function(data) { handle($('<div>').html(data).find('table.Contents tr')); }); function handle(element) { $(element).each(function() { var MyHref = $(this).find('.ProductName').find('a').attr('href'); //http://mysite/products/product1.html var MyHrefInner = $(this).find('.ProductName').find('a').text(); //Product 1 var MyQty = $(this).find('.ItemQuantity').find('input').val(); //The quantity of <input type="text" size="2" name="qty[4df7c1555b822]" id="text_qty_4df7c1555b822" class="qtyInput quantityInput" value="1"/> }); }

在每行中迭代表获取值。可以是输入或href或文本

2 个答案: