php - 如何使用 jquery 将类添加到超链接？

Question

我想向 span 元素内的超链接添加一个附加类。我可以使用 jquery $( ".q-button" ).wrapAll( "<div class='q-button-wrap' />");
将 div 添加到 span 元素的组合中

但我需要使用 jquery 在 span 元素中设置一个超链接的类，并用一个新类包装(如帖子末尾的示例)。

这是PHP代码:

function custom_content_filter_the_content( $content ) {
    if ( function_exists('get_field') ) {
      $content .= '<span class="q-button" id="q-button-1" data-icon="a">' . get_field("website") . '</span>';
      $content .= '<span class="q-button" id="q-button-2" data-icon="a">' . get_field("website2") . '</span>';

    }
    return $content;
}
add_filter( 'the_content', 'custom_content_filter_the_content' );

内容的 HTML 看起来完全像这样:

<div class="q-button-wrap">
    <span class="q-button" data-icon="a">
        <a href="http://google.com">Google</a>
    </span>
    <span class="q-button" data-icon="a">
        <a target="_blank" href="http://http://localhost.site.com/mypost">My post</a>
    </span>
    <span class="q-button" data-icon="a"></span>
</div>

超链接在<span class="q-button">里面我不知道将类添加到与此类似的超链接的正确方法:

$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />");


有人可以建议我解决这个问题吗？

更新:另外，我想在这里实现两件事。 1) 我想向超链接添加类 2) 我需要另一个 div 环绕超链接。

所以应该是这样的:

<div class="q-button-wrap">
    <span class="q-button" data-icon="a">
        <i class="new-list-class">
            <a href="http://google.com" class="new-class-for-link">Google</a>
        </i>
    </span>
    <span class="q-button" data-icon="a">
        <i class="new-list-class">
            <a target="_blank" href="http://http://localhost.site.com/mypost"  class="new-class-for-link">My post</a>
        </i>
    </span>
    <i class="new-list-class">
        <span class="q-button" data-icon="a"  class="new-class-for-link"></span>
    </i>
</div>

更新:

这是我尝试过的:

第一次:

<script>
jQuery(document).ready(function(){
$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />"); //to wrap all the elements in the div - This is success but not the other two
$( ".q-button a" ).wrapAll( "<span class='new-link-class-wrap' />"); //wrap the hyperlink
$( ".q-button a" ).addClass('new-class-for-link'); // add class to the link
});
</script>

第二次(根据- jquery docs ):

<script>
jQuery(document).ready(function(){
$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />"); //  to wrap all the elements in the div-  This is success but not the other two
$( ".q-button a" ).wrapAll( "<span class='new-link-class-wrap' />"); //wrap the hyperlink
$( ".q-button a" ).addClass("new-class-for-link"); // add class to the link
});
</script>

我两次尝试都没有成功。无法实现既向超链接添加类又在超链接周围包装一个新类。

Answer 1

$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />");
$( ".q-button a" ).addClass('your-class-here');