3

12 個の折りたたみ可能なリスト (次のような) があり、それぞれが動的に作成された「li」の束を取得します。

  <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
    <h3>Community Alerts
    <span id="comm_count" class="ui-li-count" style="float:right;">0</span></h3>
    <ul id="communityAlertList" data-role="listview"></ul>
  </div>

ユーザーが 'li' の 1 つでタップホールドを行うと、'li' を削除したい (その部分が機能している) ため、ui-li-count を更新/削減する必要があります。スパンを見つけてそのコンテンツを取得するには、次を使用しています。

    var ui_li_count = $(this).closest('span')
    var count = $(ui_li_count).textContent;    // also tried innerHTML
    alert("Count = " +count);
    count--;
    $(ui_li_count).html(count);

アラートに「Count = undefined」と表示されます。

textContent を見つけて取得するにはどうすればよいですか?

4

1 に答える 1

2

問題はあなたの使い方です.closest()。機能する方法.closest()は、(this) 要素から扇状に広がって、最も近い親/子を見つけることです。コードには、 の直接の親/子である span 要素がない<li>ため、 undefined が返されます。

jqueryセレクターを使用して簡単に言えば、取得したいスパンはliから次のようにネストされます。

var count =  $(this).parent().parent().children('h3').children('span').text();

ただし、これらすべてのセレクターを実際に使用するわけではないため、次のようにすることができます。

var count =  $(this).closest('div').find('span.ui-li-count').text();

h3は と同じレベルにあるため、ul最初にコンテナを取得する必要があります。この例ではdivです。次に、find を使用して、その div 内のスパンを見つけます。

.text()また、以前はコンテンツを取得していたことにも注意してください。これは、javascripts に代わる jQuery.textContentです。

コードで動作することを確認できるように、簡単なテストケースを作成しました。

http://jsbin.com/odamac/3/edit

うまくいけば、これはあなたを正しい方向に向けるでしょう:)

アップデート

もう 1 つ遭遇する問題は、あなたの DOM があなたが思っているように正確にレイアウトされていないということです。jQuery Mobile は、ウィンドウが読み込まれるときに追加の要素をページに挿入して、その機能を実装できるようにします。

実際のページ DOM は次のようになります。

<div data-role="page">

    <div data-role="collapsible" class="ui-collapsible">

        <h3 class="ui-collapsible-heading">
            <a href="#" class="ui-collapsible-heading-toggle ui-btn">
                <span class="ui-btn-inner">
                    <span class="ui-btn-text">
                        Community Alerts
                        <span id="comm_count" class="ui-li-count" style="float:right;">5</span>
                        <span class="ui-collapsible-heading-status"> click to expand contents</span>
                    </span>

                    <span class="ui-icon">&nbsp;</span>
                 </span>
             </a>
         </h3>

         <div class="ui-collapsible-content">

             <ul id="communityAlertList" data-role="listview" class="ui-listview">
                 <li data-theme="b" id="1" class="ui-li">1</li>
                 <li data-theme="b" id="2" class="ui-li">2</li>
                 <li data-theme="b" id="3" class="ui-li">3</li>
                 <li data-theme="b" id="4" class="ui-li">4</li>
                 <li data-theme="b" id="5" class="ui-li">5</li>
             </ul>

         </div>
     </div>

 </div>

折りたたみ可能な機能を機能させるために、jQuery Mobile が挿入した余分な要素と要素に注意してください。closest();、find();、parent();、children();などを使用して DOM をトラバースするときは、これらの要素を考慮する必要があります。

于 2012-08-26T00:25:54.770 に答える