12

これはかなり簡単だと思いましたが、キーワードが一般的すぎると思うので、thisやthisのようなクエリ結果を取得し続けています。

基本的に、私は次のHTMLを持っています:

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur</span>
    <span class="highlighted">adipiscing</span>
    elit. Sed massa.
<div>

隣接するスパン タグを 1 つのスパン タグにマージしたいと考えています。つまり、間に空白しかないスパンを見つけます (これには、スペース、タブ、および改行を含めることができます)。

私が探している結果はこれです：

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur adipiscing</span>
    elit. Sed massa.
<div>

関数を調べましたnextUntilが、テキストではなくタグのみを返すようです。たとえば、

$("span.highlighted").nextUntil("span.highlighted").andSelf().text();

は

ipsumconsecteturradipiscing

それよりも

ipsum dolor sit amet, consecteturradipiscing

2 つのタグがある場合、それらの間のテキストを見つけるにはどうすればよいですか?

4

6 に答える 6

5

DOM にドロップダウンすると、兄弟をチェックするときにテキスト ノードの内容を確認できます。

何かのようなもの：

function combineSpans(span, nextspan)
{
  var follower = span.nextSibling;
  var concat = true;

   while (follower != nextspan)
   {
     if (follower.nodeName != '#text')
     {
       concat = false;
       break;
     }

     var len = follower.data.trim().length;
     if (len > 0)
     {
       concat = false;
       break;
     }

     follower = follower.nextSibling;
   }

  if (concat)
  {
    $(span).text($(span).text() + " " + $(follower).text());
    $(follower).remove();
  }
}

この CodePenの HTML でこれを使用します。

于 2013-07-15T19:39:57.517 に答える
0

タイトルが要求するように、スパン間のテキスト ノードを取得する方法は次のとおりです。

var textNodes=$('#test').contents().filter(function(){
    return this.nodeType == 3; // text node
});

各ノードを前のノードと比較することで、間に空のテキスト ノードがない連続するスパンを手動でチェックすることもできます。このような何かがトリックを行います：

function combineSpansIn(selector, spanClass) {
    // initialize precedent values
    var prec=null;
    var precNodeType;

    $(selector).contents().each(function(){
        if ($.trim( $(this).text() ) !== "") { // empty nodes will be useless here
            var nodeType = this.nodeType;

            // check if still a combinable span
            if (nodeType == 1 && this.className==spanClass && nodeType == precNodeType) {
                // append current node to precedent one
                $(prec).append(" "+ $(this).text() );

                // remove current node
                $(this).remove();
            } else {
                // update precedent values
                prec=this;
                precNodeType = nodeType;
            }
        }
    });
}

combineSpansIn('#test', 'highlighted');

このFIDDLEを見てください。

于 2013-07-15T19:50:19.850 に答える