Question

我正在克隆一个表单，它给了我很多我不想要的数据。我已经做了以下帮助

var formDataUnformatted = $("#content").html();
var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

然而，这仍然让我有很多东西。现在我可以看到自己做了很多替换呼叫来清理所有东西，这似乎并不好。上面给我的内容如下（但我已经删除了许多不必要的代码）。

<input style="" class="ui-sortable-handle" name="_token" value="sdfsd" type="hidden">
<div class="tab-pane active ui-sortable-handle" id="editor-tab">
        <fieldset id="content_form_name">
            <legend>Document Name</legend>
        </fieldset>
</div>

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group-handle">
    <label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
    <div class="controls col-sm-7">
        <textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
    </div>
</div>

我的目标是获取具有类form-group-handle的div的div和内容。基本上，上面应该变成

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group-handle">
    <label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
    <div class="controls col-sm-7">
        <textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
    </div>
</div>

没有找到所有坏的div，并使用像replace这样的东西，有没有办法找到我想要的类的所有div，并保留那些内容？

由于

Answer 1

将clone用于该特定类：

var clone = $('.form-group-handle').clone();

Answer 2

$(".form-group-handle").each(function() 
{
  console.log($('.form-group-handle').clone());

  // or

  console.log($('<div>').append($('.form-group-handle').clone()).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="" class="ui-sortable-handle" name="_token" value="sdfsd" type="hidden">
<div class="tab-pane active ui-sortable-handle" id="editor-tab">
        <fieldset id="content_form_name">
            <legend>Document Name</legend>
        </fieldset>
</div>

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group-handle">
    <label for="textareaInput" class="col-sm-4 control-label">Text Area:</label>
    <div class="controls col-sm-7">
        <textarea rows="5" class="form-control" id="textareaInput" name="textareaInput" cols="50"></textarea>
    </div>
</div>

Answer 3

如果将jQuery与类选择器一起使用，则jQuery对象仅包含您需要的div

$('div.form-group-handle')

但是jQuery对象包含一个集合的DOM元素（你可以使用$。（'div.form-group-handle'）。长度来检查与你的选择器匹配的元素数量，所以你需要迭代它们来构建你的最终字符串。

如果你想要每个div的html

var formDataUnformatted = '';
$('div.form-group-handle').each(function() {
     formDataUnformatted += this.outerHTML; 
     // where 'this' represents each matching div
});

编辑（关于您对Jordan Lowe的回答，表明html不在DOM中）

如果formDataUnformatted是表示html的字符串，则可以过滤该内容以获取div的集合

$(formDataUnformatted).filter('div.form-group-handle');

Answer 4

结合其中一些答案，我似乎发现了一个问题。上面的一些是通过错误，因为它不是一个JQuery对象。所以我提出了以下解决方案

var formDataUnformatted = $("#content").html();
var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

var dataArray = new Array();

$(cleanFormData).filter('div.form-group-handle').each(function() {
    dataArray.push(this.outerHTML);
});

JQuery - 获取某些div的内容

4 个答案: