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

【问题标题】：How to add class to an hyperlink using jquery?如何使用 jquery 将类添加到超链接？
【发布时间】：2014-01-10 05:14:29
【问题描述】：

我想在 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>

这两次尝试都没有成功。未能实现既向超链接添加类并在超链接周围包装新类。

【问题讨论】：

不太确定您想要实现的目标，但也许您正在寻找：$( ".q-button" ).find('a').addClass('yourClass'); ？那是你需要的吗？还是您需要 PHP 方面的解决方案？
根据什么条件添加一个类？你看过jQuery addClass()吗？什么超链接，没有显示？真的不清楚你在问什么。
在jsfiddle上可以随时添加，这样会更容易回答

标签： php jquery html css hyperlink

【解决方案1】：

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

【讨论】：

我尝试了您的建议（已尝试，如编辑后的问题描述中所示）。我没有运气将新类添加到超链接。
代码应该可以工作。你确定当文档准备好时，当这段代码被称为$( ".q-button a" ).addClass('your-class-here');时，'a'元素已经存在了吗？你的“a”元素来自哪里？它们是由其他 javascript 函数动态创建的吗？
我在我的 jquery 文件中犯了一个错误。我后来修好了，你的建议帮助我达到了我的预期。谢谢！

【解决方案2】：

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

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

【讨论】：