如何通过ajax过滤返回的html输出中的div?

时间:2013-06-10 12:34:00

标签: javascript html find dynamic-html

使用Label,Name,Id,Min,Max,Value等设置创建动态字段表单。

当我点击按钮然后一个js函数返回两个div内的文本框的定义。

此处返回HTML代码:

<!--field div-->
<div id="text-field<?php echo $FieldId; ?>" class="new-field-div" onclick="activeSettings('text-field<?php echo $FieldId; ?>', 'text')">
    <p>Single Line Text</p>
    <input name="text-field<?php echo $FieldId; ?>" type="text" disabled />
</div>

<!--filed settings div-->
<div id="text-field-settings<?php echo $FieldId; ?>" class="new-field-div">
<p>Paragraph Field Label</p>
<input id="label-" name="label-" type="text"  />
<p>Field Size</p>
<select name="size-">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>
<p>Charcter Range</p>
Min: <input id="min" name="min" type="text" value="0" style="width:50px;" />
Max: <input id="max" name="max" type="text" value="0" style="width:50px;" />
<p>Required: <input name="required" type="checkbox" value="yes" /> </p>
</div>

我想使用js过滤div div。

我试过了:

function add_new_field(FormId, Type)
{
    jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        data: "action=ufb_add_new_field&FormId=" + FormId + "&FieldType=" + Type,
        success:function(data){

            var div1 = jQuery(data).find('div#text-field1');

            var div2 = jQuery(data).find('div#text-field-settings1');

            //filter 1st div
            jQuery("#right-side-fields").append(div1);

            //filter 2nd div
            jQuery("#left-side-fields-settings").append(div2);
        }
    });
}

但没有运气,需要帮助或建议的人。提前谢谢。

1 个答案:

答案 0 :(得分:0)

您收到的数据类型是一个字符串,您需要解析html以获取DOM节点。

检查http://api.jquery.com/jQuery.parseHTML/

尝试在成功函数的乞讨时添加它。

data = $.parseHTML(data);

这会让你保留一个DOM节点数组而不是字符串,所以在用jQuery对象包装后你应该能够找到你想要的div。