私はセレクターでタグの外側の値だけを取得する必要があります

私はこのような場合があります:

  • $204.61
  • ラベル "$ 204.61"のラベルセレクタ付きの外側の値のみ取得する必要があります。私は疲れました

    $( "li:last").text()
    

    しかし、結果は

    売上税:   $ 204.61

    <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

    $("li:last").text();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
  • $204.61
  • </div> </div>

    2
    明らかな質問:あなたはhtmlを変えることができますか?例えば
  • $ 204.61
  • 追加された 著者 freedomn-m,
    答えのように型や位置で項目を取得するのではなく、特定の要素を削除する場合は、次のようにします。 $( "li")。html()。replace($( "li label" )[0] .outerHTML、 ''); ( "li label"は削除する要素の選択子です)
    追加された 著者 Kaddath,
    私はhtmlを変えることができません。私はただ問題のこれらの値を持つWebビューがあるアンドロイドアプリのためにJSONファイルに数値を入れる必要があります。別の方法は、Javaコードで正規表現を使用することですが、私はいくつかのセレクタを使用することができるのだろうか?
    追加された 著者 Cristianjz91,

    4 答え

    テキストノードを除外してから、そのテキストコンテンツを取得します。

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    var text = $('li:last')
     //get all child nodes including textnodes
      .contents()
     //filterout text nodes
      .filter(function() {
        return this.nodeType == 3;
      })
     //get text content and trim out leading and trailing space
      .text().trim();
    
    // or in case structure is same then use
    var text1 = $('li:last')
      .contents()
     //get the last node which is the text
      .last()
      .text().trim();
    
    console.log(text);
    console.log(text1);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    • $204.61
    </div> </div>


    UPDATE 1: With pure JavaScript (assumes to get only the last text node)

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    // if there is only single ul then you can use
    // var last = document.querySelector('li:last-child');
    
    // get all li tags
    var lis = document.getElementsByTagName('li');
    // get the last li
    var last = lis[lis.length - 1];
    // get the last child node and then its text conetent
    var text = last.childNodes[last.childNodes.length - 1].textContent.trim();
    
    console.log(text);
    • $204.61
    </div> </div>


    アップデート2: Anyway, it's better to wrap the element with a span for getting the text in a simple way.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    var text = $('li:last span').text();
    
    console.log(text);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    • $204.61
    </div> </div>

    3
    追加された

    HTMLコードを少し変更するのはなぜでしょう。

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $(document).ready(function(){
      var result = $('li:last span').text();
      console.log(result);
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
  • $204.61
  • </div> </div>

    0
    追加された

    これはあなたの質問に対する答えではなく、私がやや関連性があると思う実験に過ぎません。

    I realize you want to collect the data as opposed to just trying to hide some parts of it.

    But this got me thinking if you can actually hide some parts of it using CSS

    繰り返しますが、これは実験ですが、 <使用することはできますか?によると、現時点でこれは少なくとも89%のユーザーに有効です。 ChromeとFFの両方をテストしましたが、すべて問題ありません。 IE/Edgeはサポートされていません。

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    li {
      margin-left: -5.5em;
      -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0)5.5em, /** <---- Use this to determine the cutoff point **/
      rgba(0, 0, 0, 1)0, rgba(0, 0, 0, 1));
    }
  • $204.61
  • </div> </div>

    0
    追加された

    複雑なHTMLクエリを使用する代わりに、ニーズに合わせてHTMLを調整することをお勧めします。 @ freedomn-mが書いたように、htmlを次のように変更します。

  • $204.61
  • そしてあなたのスクリプトは次のようになります。

    $( "li:last span").text()
    
    0
    追加された
    HTMLコードを変更することはできません。
    追加された 著者 Cristianjz91,