Wordpressのアンカーに属性を追加する

Question

Wordpressの生成されたアンカーリンクにカスタム属性の設定を追加します。 これは、Jquery Mobileに属性を見つけさせ、その中からボタンを作成させるためです。

PHPを介してWordpressで生成されるすべてのアンカーリンクには、page_itemクラスが含まれています。だから私の推測では、必要な 'page_item'クラスを検索し、必要なボタンを生成するために必要な属性情報を追加するだけです。

私のheader.phpのファイルが必要なのjQueryライブラリへの次のリンクが含まれています

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 

は、私は私のアンカーリンクに属性を追加するには、次のコードを使用していたが、私はちょうどそれをできるように見えることはできません作業。予め

<ul> 

        <li class="page_item page-item-5"><a href="http://localhost/ddwp/?page_id=5">Home</a> 
<ul class='children'> 
<li class="page_item page-item-11"><a href="http://localhost/ddwp/?page_id=11">Link1</a></li> 
</ul> 
</li> 
<li class="page_item page-item-17"><a href="http://localhost/ddwp/?page_id=17">Link2</a></li> 
<li class="page_item page-item-21"><a href="http://localhost/ddwp/?page_id=21">Link3</a></li> 
<li class="page_item page-item-23"><a href="http://localhost/ddwp/?page_id=23">Link4</a></li> 
<li class="page_item page-item-62 current_page_item"><a href="http://localhost/ddwp/?page_id=62">Link5</a></li> 
       </ul> 

ありがとう：（このコードはheader.phpのファイルのヘッダに配置されている）

<script type="text/javascript"> 
        $('.page_item').ready(function(){ 
        $(this).attr('data-transition', 'pop'); 
        $(this).attr('data-icon', 'arrow-r'); 
        $(this).attr('data-iconpos', 'left'); 
        $(this).attr('data-role', 'button'); 
        }); 

     </script> 

Firebugのワードプレスを介してコードを確認する場合は、次のコードを生成します！

種類は Dragon54

Answer 1

スクリプトが機能しない理由はいくつかあります。ここではいくつかの提案だし、属性を適用するためにテストされるいくつかのコードは、あなたは、ナビゲーション内のリンクにした後、次のとおりです。

あなたが呼び出しのすべてが含まれている機能に、それぞれ別々の呼び出しから離れ readyを移動することを検討可能性がある
1. 別々のコールごとではなく、 （私はあなたのためにそれを下に行った）。
2. .page_itemはリンクではなく、li要素です。また、これはナビゲーションリンクのみであり、ページ/投稿のコンテンツ内のリンクには適用されません。

3. WordPressのJqueryは、必ずしも$を使用して実行するのが安全であるとは限りません。 jQueryで呼び出される準備が整ったドキュメントに呼び出しをラップすることにより、関数内で$を使用してjQuery関数を呼び出すことができます。

   jQuery(function($) { 
       $('.page_item a').each(function(){ 
        $(this).attr('data-transition', 'pop'); 
        $(this).attr('data-icon', 'arrow-r'); 
        $(this).attr('data-iconpos', 'left'); 
        $(this).attr('data-role', 'button'); 
       }); 
   }); 
   

EDIT：@Jasperことにより、優れたコメントパー
これを行うにはより良い方法は次のようになります。

jQuery(function($) { 
    $('.page_item a').attr({ 'data-transition' : 'pop', 
      'data-icon' : 'arrow-r', 
      'data-iconpos' : 'left', 
      'data-role' : 'button' }); 
    }); 

Answer 2

$.ready()は、文書の読み込みのための特別なイベントであり、かつ唯一の文書で動作を考えています。代わりに$.each()を使用して項目を繰り返し処理する必要があります。

$(document).ready(function(){ 
    $('.page_item').each(function() { 
    $(this).attr('data-transition', 'pop'); 
    $(this).attr('data-icon', 'arrow-r'); 
    $(this).attr('data-iconpos', 'left'); 
    $(this).attr('data-role', 'button'); 
    }); 
}); 

Answer 3

jQuery(function() { 
    jQuery('li.page_item a').each(function() { 
     jQuery(this).attr({ 
      'data-transition': 'pop', 
      'data-icon': 'arrow-r', 
      'data-iconpos': 'left', 
      'data-role': 'button' 
     }); 
    }); 
}); 

か、単に

jQuery(function() { 
    jQuery('li.page_item a').attr({ 
     'data-transition': 'pop', 
     'data-icon': 'arrow-r', 
     'data-iconpos': 'left', 
     'data-role': 'button' 
    }); 
});