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');

Answer 2

它在JSFiddle中正常工作。可能是您没有在html模板中导入必要的jquery文件。或者你的js函数可能有一些错误。检查firebug控制台是否有任何错误并尝试解决。希望这会有所帮助。

$('.q-button a').addClass('myClass');

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

2 个答案: