3 
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

jQueryの後にある必要があります：

<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Maybe also only some text.</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass"><a href="path/to/link" title="some title" class="download">Only with link</a></div>
</p>

したがって、の後のすべての HTML コードは</span>、次に発生するまで div でラップする必要があります。</p>

私が試したこと：

$(".datum").each(function (index) {
        $(this).nextUntil("p").andSelf().wrapAll("<div class='someClass' />");
    });

または：

$(".datum").nextUntil("p").wrap('<div class="someClass" />');

どちらも機能しませんでした。

4

4 に答える 4

3

これを試してください: wrapInnerを使用して、div のコンテンツをbodytextdiv でラップし、ラップされた div からスパンを取り出すことができdatumます。

$(function(){
    $('p.bodytext').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

EDITbodytext ： - OPが子datumスパンを含むフィルタを配置したいので。ここで:hasセレクターを使用できますbodytext。:containsまたは.has() jQuery メソッドも使用できます。

$(function(){
    $('p.bodytext:has(span.datum)').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span>19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

于 2015-12-10T12:04:18.127 に答える
0

これは、完全な jQuery ソリューションよりも高速なアプローチです。

最初の要素に影響を与え、それを削除し、残りのコンテンツを残してコンテンツを再作成します。

これが私が意味することです：

$(function(){
  
	$('.bodytext').each(function(){
		var first = this.children[0];
		this.removeChild(first);
		this.innerHTML = first.outerHTML + '<div class="someclass">' + this.innerHTML + '</div>';
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

プロパティには、以下outerHTMLを含む入力の HTML 全体が含まれます。

  • name
  • id
  • class
  • data-*
  • on<event>

  • ... HTML に直接設定された任意の属性

    これがうまくいくことを願っています。

于 2015-12-10T12:28:57.447 に答える
0

要素が開始されるまで、クラス「データム」を持つ要素の後にコードが div 要素を追加するため、ロジックが間違っています<p>。しかし、class="bodytext" の div には要素がありません<p>。

これを試して;

$(".bodytext").each(){
    $(this).after($(".datum")).wrapAll("<div class='someClass'>Some text <a href='path/to/link' title='some title' class='download'>Some text</a>. Again some text!</div>");
}

wrapAllについてはよくわかりませんが、追加操作の順序は正しいです。

于 2015-12-10T12:24:49.680 に答える
0

試す：

$('.bodytext').find('*').not('span').wrap('<div class="someClass" />')
于 2015-12-10T12:10:52.193 に答える