jquery - css は子要素を選択しない

Question

以下のようなhtmlがあるとしましょう：

<h3 class="search-result-title">
            This is a test
            <small class="search-result-subtitle">
                Some more explanation
            </small>
        </h3>

This is a test なしでテキストをフィルタリングするにはどうすればよいsmallですか?

編集: symfony Dom Crawler で使用しています。

だから私は持っていますが、要素filter(a. h3 search-result-title);の内容は欲しくありません。small

Answer 1

element をパラメーターとして指定してから、それを使用filter()してコンテンツを抽出できます。smallremove()

$('.search-result-title').contents().filter("small").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="search-result-title">
   This is a test
   <small class="search-result-subtitle">
      Some more explanation
   </small>
 </h3>

Answer 2

このコードを使用して、h3 要素のテキストのみを取得できます。

document.querySelector('.search-result-title').firstChild.textContent

Answer 3

あなたがjQueryを使用しているのを見たので、これを見つけました: text without child

次のようなことができます：

$.fn.ignore = function(sel){ return this.clone().find(sel||">*").remove().end(); }; console.log($("h3.search-result-title").ignore("small").text().trim());

これは「これはテストです」を返します

それが役に立てば幸い ！

Answer 4

以下を使用できます .filter()。.contents()

var txt = $('h3.search-result-title').contents().filter(function(){
    return this.nodeType == 3; 
 });

Answer 5

This is a testspan タグでラップし、ユーザー$('h3.search-result-title>span:first-child')が選択します。