0

我正在尝试使用 jquery ajax 将 contenteditable div 中的内容保存在数据库中。问题在于page_body：$(".class2").not('h2').html()选择标题，我想选择除标题之外的所有内容。使用相同的东西:not- 我最终有两个标题，当我使用$(".class2").next()它时只保存第 1 段和$(".class2").nextAll()第 2 段。

我的 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);
             }
         });
     });
 })

请帮忙！如果这是一个明显的问题，我很抱歉，但我对这一切都很陌生。

4

5 回答 5

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()选择器的效率会更高。

于 2013-06-04T14:17:11.300 回答
0

您必须在 children() 上使用“不”。但是由于您没有父节点，因此您必须基本上制作一个虚拟包装，以便您可以输出 html()，如下所示：

    page_body: $(".class2").children().not('h2').clone().wrap('<p>').parent().html();
于 2013-06-04T14:19:41.347 回答
0

如果您需要操作 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()
 },
于 2013-06-04T14:22:29.750 回答
0

虽然这不是最可靠的答案，但您可以获取 h2 结束标记的索引</h2>并添加标记 (5) 的长度以使用substring().

var page_body_location = $(".class2").html().indexOf('</h2>')+5
var page_body = $(".class2").html().substring(page_body_location)

jsFiddle在这里。

于 2013-06-04T14:11:42.173 回答
0 
page_body: $(".class2 > *").not('h2').html();
于 2013-06-04T14:13:58.787 回答