4

div内の最初のh2要素を「管理」したいのは、それが本当に「最初の要素」である場合のみです。

<div id="test">
    <h2>Try 1</h2>
    Test Test Test
    <h2>Try 2</h2>
</div>

ここでは、「Try1」というテキストのh2のみを管理する必要があります

<div id="test">
    Test Test Test
    <h2>Try 1</h2>
    <h2>Try 2</h2>
</div>

ここではありません（前にテキストがあります）。

jQueryでそれを行うにはどうすればよいですか？

4

6 に答える 6

4

そのためにjqueryは必要ありません。

document.getElementById('test').firstChild.nodeName // gives the name of the node

これにより、最初のノードの名前が得られます。それがタグではなく単なるテキスト ノードであってもです。

document.querySelector()オプションで、セレクターをより柔軟に使用したい場合や、ほとんどのクライアント ブラウザーがそれをサポートしていることがわかっている場合は、もちろん使用できます。

明確にするために：改行を追加すると、これもテキストノードと見なされるため、見出しは同じ行で開始する必要があります。そうしないと#text、両方の例の結果が得られます!

これは失敗します:

<div id="test">
    <h2>Try 1</h2>
    Test Test Test
    <h2>Try 2</h2>
</div>

そしてこれはうまくいきます：

<div id="test"><h2>Try 1</h2>
    Test Test Test
    <h2>Try 2</h2>
</div>

あなたのための小さなデモ

于 2012-12-14T14:12:00.303 に答える
2

.contents空白テキストのみである先行ノードを条件付きで無視するために使用できます。次に、最初のノードが<h2>（Fiddle）であるかどうかを確認します。

function isFirstChildH2(selector) {
    // get th efirst node, which may be a text node
    var firstNode = $(selector).contents().first();

    // if the first node is all whitespace text, ignore it and go to the next
    if(firstNode[0].nodeType == 3 && firstNode.text().match(/\S/g) == null) {
        firstNode = firstNode.next();
    }

    if(firstNode.is("h2")) {
        // it's an h2; do your magic!
        alert("h2 is the first thing on " + selector)
     } else {
        // first node is either non-whitespace text or an non-h2 element
        // don't do your magic
        alert("h2 is NOT the first thing on " + selector)
     }
}

isFirstElementH2("#test");
于 2012-12-14T14:44:49.253 に答える
2

私は自分自身が解決策を見つけたと思います、少し面白いです：

if($.trim($('#test').html()).substr(0,4).toLowerCase() == "<h2>")
{
    $('#test h2:first').css('background-color', 'red');
}

についてどう思いますか？:)

于 2012-12-14T14:40:26.580 に答える
2

これは、空白のテキスト ノードをすべて無視して、最初のノードであるヘッダーのみを取得するようにフィルター処理する方法です。

$("#test").children("h2").first().filter(function() {

    var childNodes = this.parentNode.childNodes;
    var i = 0;
    var textNode = 3;

    // No children
    if(!childNodes.length) {
        return false;
    }

    // Skip blank text node
    if(childNodes[i].nodeType === textNode && childNodes[i].textContent.trim().length === 0) {
        i ++;
    }

    // Check we have a match
    return childNodes[i] === this;

});

これが実際の動作ですhttp://jsfiddle.net/nmeXw/

于 2012-12-14T14:54:25.587 に答える
2

ここで直面している課題は、JavaScript が空白もテキスト ノードとして認識することです。したがって、JavaScript の観点からは、この HTML:

<div id="test">
    <h2>Try 1</h2>    
    Test Test Test    
    <h2>Try 2</h2>
</div>

次の HTML とは異なります。

<div id="test"><h2>Try 1</h2>    
    Test Test Test    
    <h2>Try 2</h2>
</div>

最初のケースでは、 内の最初のノードdivは textNode ( nodeType == 3) です。2 番目の HTML の例では、 内の最初のノードdivはh2ノードです。

これは、jQuery とネイティブ JavaScript を組み合わせてすべての要素をループする便利な関数です。

解決

var objNodes = $(".wrapper").contents().get();

  function loopNodes(objNodes, i) {
    i = (typeof i === "undefined") ? 0 : i;

    if (objNodes[i].nodeType !== 3) {
      return {"isHeader":true, "first":$(objNodes[i])};

    } else {
      var strText = objNodes[i].innerText || objNodes[i].textContent;
      if ($.trim(strText).length === 0) {
        return loopNodes(objNodes, i+1);

      } else {
        return {"isHeader":false, "first":null};

      }
    }
  }

使用法

var objResults = loopNodes(objNodes);
if (objResults.isHeader) {
    console.log("Coolness");
    objResults.first.text("AWESOME FIRST HEADER!"); 
} else {
    console.log("Less Coolness");
}

実際の動作: http://jsbin.com/welcome/61883/edit

編集: innerText/textContent を取得するクロスブラウザーの方法を追加しました。この件に関する完全なリファレンスについては、 Quirksmodeを参照してください。

于 2012-12-14T14:18:48.047 に答える
1

OK、いくつかの jQuery を単純な DOM コードと混ぜてみましょう (jQuery はテキストノードを処理できないため):

var $el = $("#test > h2:first-child");
if (!$el.length) return false;
var el = $el.get(0),
    reg = /\S/; // no whitespace
for (var prev = el; prev = prev.previousSibling; )
    if (prev.nodeType == 3 && reg.test(prev.data))
        return false;
return el;

jsfiddle.net のデモ

于 2012-12-14T14:26:39.093 に答える