添加属性在WordPress的锚(Adding attributes to an anchor in

我想自定义属性设置添加到WordPress的的产生的锚链接。这是为了让jQuery Mobile的发现的属性，使一个按钮出来。

每一个锚链接，这是在WordPress的通过PHP的，其包含的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>

我想用下面的代码属性添加到我的锚链接，但我似乎无法让它正常工作。（此代码被放置在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>

当检查经由萤火代码WordPress的生成下面的代码：

<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>

提前致谢！

亲切的问候Dragon54

Answer 1:

有你的脚本不能正常工作的几个原因。下面是一些建议，以及一些代码，测试应用您在导航的链接后的属性：

你可能会考虑将ready从每个单独叫走至包含所有的呼叫，而不是单独的每个呼叫的功能。（我已经做到了下面的你）。
.page_item不是链接，它是一种li元素。还要注意的是，这仅仅是导航链接 - 它并不适用于页/帖的内容有任何联系。

jQuery的WordPress中并不总是使用安全运行$ 。通过包装调用准备文档中调用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'); }); });

编辑：
每更好的方式来做到这将是很好的意见通过@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'
    });
});

文章来源: Adding attributes to an anchor in Wordpress