Question

我在保存到数据库之前尝试清理html。这是我的结构：

Mid point is:  1
target value is smaller than a mid point
Mid point is:  0
target value is smaller than a mid point
In [3, 4, 6, 7] 1 is going to be inserted at index 0
Mid point is:  2
target value is smaller than a mid point
Mid point is:  0
target value is larger than a mid point
Mid point is:  1
Found the index location at  1
In [1, 3, 4, 6, 7] 3 was found at index 1
Mid point is:  2
target value is larger than a mid point
Mid point is:  3
target value is smaller than a mid point
In [1, 3, 4, 6, 7] 5 is going to be inserted at index 3
Mid point is:  2
target value is larger than a mid point
Mid point is:  4
target value is larger than a mid point
Mid point is:  5
target value is larger than a mid point
In [1, 3, 4, 5, 6, 7] 8 is going to be inserted at index 5
The final list is: [1, 3, 4, 5, 6, 8, 7]

我追求的是：

<div id="container">
    <div class="row">
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
          </div>
          <a class="handle"></a>
        </div>
      </div>
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
          </div>
          <a class="handle"></a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
          </div>
          <a class="handle"></a>
        </div>
      </div>
    </div>
</div>

这是我的javascript：

<div class="row">
  <div class="cell">
    <p>Text goes here...</p>
  </div>
  <div class="cell">
    <p>Text goes here...</p>
  </div>
</div>
<div class="row">
  <div class="cell">
    <p>Text goes here...</p>
  </div>
</div>

使用我的代码，我只能删除.inner div，而不是别的。我可以一次性删除.inner和.wrapper，还是需要创建另一个循环？

Answer 1

我不认为unwrap正是您正在寻找的，因为您也想删除anchor元素。

您可以重置cell元素的内容，而不是

＆＃13;

$('#container .cell').html(function(){
  return $(this).find('div.inner').contents();
});

console.log($('#container').html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="row">
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
          </div>
          <a class="handle"></a>
        </div>
      </div>
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
          </div>
          <a class="handle"></a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <div class="wrapper">
          <div class="inner">
            <p>Text goes here...</p>
            more
          </div>
          <a class="handle"></a>
        </div>
      </div>
    </div>
</div>

＆＃13;

Answer 2

这相对简单，只需使用原始HTML：

@Entity
@Table(name = "FOO")
class Foo{
    @Id
    @Column(name = "F_ID", nullable = false)
    private Long id;


    @Column(name = "F_NAME")
    private String fName;

    @Column(name = "CODE", nullable = false)
    private String code;

    //What should be the join condition?
    private List<Bar> bars; 
}


@Entity
@Table(name = "BAR")
class Foo{
    @Id
    @Column(name = "B_ID", nullable = false)
    private Long id;


    @Column(name = "B_NAME")
    private String bName;

    //Is this required?
    //private String code;

}

function clean(wrapper) {
  console.log('cleaned');
  $("#container .row .cell").each(function() {
    $(this).html($(this).find('.inner').html());
  });
}

body *:not(button) {
  padding: 10px
}
.container {
  background: #223344;
}
.row {
  background: #443322;
}
.cell {
  background: red;
}
.wrapper {
  background: blue;
}
.inner {
  background: green;
}

jQuery unwrap（）多个元素

2 个答案: