Question

我正在尝试使用jquery ajax从数据库中的contenteditable div中保存内容。问题出在page_body行：$(".class2").not('h2').html()选择标题，我想选择除标题之外的所有内容。同样的事情是使用:not - 我最终有两个标题，当我使用$(".class2").next()时，它只保存第一段，而$(".class2").nextAll()只保存第二段。

我的HTML：

<div class="class1">
    <div class="class2" contentEditable="true" id="id">
        <h2 id="title">title</h2> 
        <p id="page_body">body</p>
    </div>
    <button class="gen_submit">save</button>
</div>

我的Jquery：

  $(document).ready(function () {

     $('.class1').on('keydown', ".class2", function (event) {
         event.stopPropagation();
         var unsaved = $('<div class="unsaved"><p>m1</p></div>');
         $(this).append(unsaved);
     })
         .on('unload', function (event) {
         event.stopPropagation();
         alert("m2");
     })
         .on('click', '.gen_submit', function (event) {
         event.stopPropagation();
         event.preventDefault();
         $('.unsaved').remove();
         $.ajax({
             url: "save.php",
             dataType: "html",
             type: "POST",
             data: {
                 id: $(".class2").prop("id"),
                 title: $("#title").html(),
                 page_body: $(".class2").not('h2').html()
             },

             success: function (data, status) {
                 console.log("Success!!!");
                 console.log(data);
                 console.log(status);
             }
         });
     });
 })

请帮忙！我很抱歉，如果这是一个显而易见的问题，但我是所有这一切的新手。

Answer 1

此：

$(".class2").not('h2')

说选择所有不属于h2的class2，但你想要class2的孩子“

使用这一个：

$(".class2").children().not('h2').html()

编辑：这具有相同的净效应，但效率较低：

$(".class2>*").not('h2').html()

这说找到一切，然后在一切中找到那些属于class2的孩子，然后找到那些不是h2。这是jQuery中从右到左的选择器，它首先获得一切并不是最好的，而.children（）选择器会更好。

编辑：对于紧凑版本：

$('.class2>*:not("h2")').html()

查找不是h2的所有内容，然后找到所有内容中的内容，然后找到那些属于class2的子项 - 可能效率仍然低于之前的值，而.children()选择器效率会更高。

Answer 2

虽然它不是最强大的答案，但您可以获取h2结束标记</h2>的索引并添加标记的长度（5）以使用{{1}获取其余内容}。

substring()

jsFiddle here.

Answer 3

page_body: $(".class2 > *").not('h2').html();

Answer 4

你必须在孩子（）上使用'not'。但是，既然你没有父节点，你必须基本上做一个虚拟包装，这样你就可以输出html（），如下所示：

    page_body: $(".class2").children().not('h2').clone().wrap('<p>').parent().html();

Answer 5

如果您需要操作DOM元素，但也不想打扰原始元素，也可以使用clone（）方法。

// Clone the div with the "class2" class & remove all h2 descendants.
var $clone = $('.class2').clone();
$clone.find('h2').remove();


// In your ajax call
data: {
     id: $('.class2').prop('id'),
     title: $('#title').html(),
     page_body: $clone.html()
 },

jquery不会选择除contenteditable div中的title之外的所有元素

5 个答案: