Question

我想要以下内容：

git merge --abort

看起来像这样：

<div class="contents"></div>
<div class="contents"></div>
<div class="contents">
  <span><h3></h3></span>
  <span><img></span>
  <span><p></span>
</div>

每个内容类的

。我的代码：

<div class="contents">
  <div>
    <span><h3></h3></span>
    <span><img></span>
  </div>
  <span><p></span>
</div>

但所有这一切都是将img和h3 spans包装在单独的groupsContent div中。我已经尝试了wrapAll，它将文档中的所有img和h3跨度放入FIRST内容类中的一个groupedContent div中。我不能将img和h3跨度放在每个内容类中的一个groupedContent div中。

Answer 1

这是一个JSFiddle ...... https://jsfiddle.net/h2awu27c/2/

使用HTML代码......

<div class="contents"></div>
<div class="contents"></div>
<div class="contents">
    <span><h3 id="h3-location">The H3</h3></span>
    <span><img id="img-location" /></span>
    <span><p>asd</p></span>
</div>
<div class="contents">
    <span><h3 id="h3-location">The H3 2</h3></span>
    <span><img id="img-location" /></span>
    <span><p>asd 2</p></span>
</div>
<div class="contents"></div>

使用JS / Jquery实现，即删除空的.contents div并将子项h3和img标记包装在groupedContent div中：

<div class="contents">
    <div class="groupedContent">
        <span><h3 id="h3-location">The H3</h3></span>
        <span><img id="img-location" /></span>
    </div>
    <span><p>asd</p></span>
</div>
<div class="contents">
    <div class="groupedContent">
        <span><h3 id="h3-location">The H3 2</h3></span>
        <span><img id="img-location" /></span>
    </div>
    <span><p>asd 2</p></span>
</div>

使用：

$('.contents').each(function() {
    var $contents = $(this);

    if ($contents.is(':empty')) { 
        $contents.remove();
    }
    else
    {
        $contents.children('span:has(h3),span:has(img)').wrapAll('<div class="groupedContent"></div>');
    }
})

Answer 2

对div.content而不是WrapAll()使用.Wrap()，然后再次选择h3和img父级别代码并将其包装起来：

$('div.contents span:nth-child(1),div.contents span:nth-child(2)').wrapAll('<div></div>')

https://jsfiddle.net/x9asccrb/

Answer 3

你可以使用下面的.wrapAll（）

＆＃13;

INSERT INTO FASEC( 
FECHAFASEC, 
  DIAGNOSTICOFINAL, 
  VIGENTE,
 )
output inserted.FECHAFASEC //inserted.coloumn Name
  VALUES(
     )

＆＃13;

$('.page .contents').each(function() {
  var $contents = $(this);
  $contents.children('span:has(h3),span:has(img)').wrapAll('<div class="groupedContent"></div>')
})

＆＃13;

.contents {
  border: 1px solid red;
  padding: 5px;
}
.groupedContent {
  border: 1px solid green;
  padding: 5px;
}
span {
  border: 1px solid blue;
}

＆＃13;

注意：您的HTML无效，<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="page"> <div class="contents"> <span><h3></h3></span> <span><img src=""/></span> <span><p>some p</p>?</span> </div> <div class="contents"> <span><h3></h3></span> <span><img src=""/></span> <span><p>some p</p>?</span> </div> <div class="contents"> <span><h3></h3></span> <span><img src=""/></span> <span><p>some p</p>?</span> </div> </div>无法span作为其后代

Answer 4

如果我理解你的要求，你需要这个：

JS：

var page = $('.page'),
    $contents = page.find('.contents:has(span)').contents(),
    item = $contents.wrapAll('<div class="groupedContent"></div>');

$('.groupedContent').clone().appendTo(page.find('.contents:empty'));

HTML：

<div class="page">
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"> 
     <span><h3>H3</h3></span>
     <span><img src="#"/></span>
     <span><p>P</p></span>
    </div>
</div>

因此，您要获取div :has span的内容，并将其包装在另一个div.groupedContent中。然后，您将克隆此包装内容并将其附加到其余.contents元素（:empty divs）。

JSFiddle

希望这有帮助

使用jQuery将同一div中的两个不同元素包装到所有类中？

4 个答案: