使用jquery和ajax从html字符串中获取div的值

时间:2014-07-14 12:04:36

标签: javascript jquery html ajax

当我尝试从我的html字符串中的div中获取值时,我遇到了问题。也许这里有人可以为我找到问题。

我尝试了很多不同的方法来获取数据。适用于他人的解决方案对我来说根本不起作用。所以我认为我在做一些严重的错误

$(document).ready(function () {
    var id = 1;

    function updateMsg() {
        $.ajax({
            url: "/opt/history/update?current=" + 1,
            cache: false,
            success: function (html) {
                id = $(html).find('#last').html();
                console.log('ID: ' + id);
                $("#result").html(html);
            }
        });
        setTimeout(updateMsg, 5000);
    }

    updateMsg();
});

这就是div的样子

<div id="last" style="display: none;">2</div>

这个div之前有一堆html代码。此div将始终位于html字符串的底部。

更新:事情是。我需要在此html字符串中传输id的值,但不能在视觉上显示它。如果你有更好的方式,我应该看看。

成功时的HTML输出

<tr>
<td>2014-07-08 14:35:47.456</td>
<td>123</td><td>321</td>
<td>Has data</td>
<td><a data-toggle="modal" data-request="2014-07-08 14:35:47.456" data-mobile="123" data-check="321" data-log="Has latest update" data-context="Context" data-historyid="28" title="info" class="open-logInfo btn btn-default" href="#logInfo">
<i class="icon-info-sign icon-black"></i> Info </a>
</td>
</tr>
<div id="last" style="display: none;">28</div> 

4 个答案:

答案 0 :(得分:3)

使用filter()

 success: function(html){
                id = $(html).filter('#last').html();
                console.log('ID: ' + id);
                $("#result").html(html);
           }

find()将始终搜索子元素。

修改

您返回的HTML无效。因为div在tr之外。这就是你的代码返回未定义的原因。您必须在td中包含该div(然后您必须使用find())。

Fiddle using find()

或者你需要用tr包裹table。在这种情况下,您可以使用filter()

Fiddle using filter()

答案 1 :(得分:0)

您可以直接访问

,而不是找到(&#39;#last&#39;)
id = $('#last').html();

答案 2 :(得分:0)

首先需要将此HTML插入DOM,然后只有您可以使用jQuery搜索#last div。例如。

function updateMsg() {
    $.ajax({
       url: "/opt/history/update?current=" + 1,
       cache: false,
       success: function(html){
            $("#result").html(html);
            id = $("#result #last").text();
            console.log('ID: ' + id);
       }
    });
setTimeout(updateMsg, 5000);
}

答案 3 :(得分:0)

试试这个解决方案:

我认为这是dom结构的问题所以请尝试用表格标记来包围你的html。

        $(document).ready(function(){
       var id = 1;

       function updateMsg() {
      $.ajax({
        url: "/opt/history/update?current=" + 1,
       cache: false,
       success: function(html){
          var html1= "<table>"+html+" </table>";
         var jqObj=$('<div>',{html:html1});   /// here is the trick   
            id = jqObj.find('#last').html();
            console.log('ID: ' + id);
            $("#result").html(html);
       }
    });
setTimeout(updateMsg, 5000);
}

updateMsg();
         });