javascript - 如何使用jQuery获取一个元素下面，满足某个条件的子元素？

Question

1. 描述你的问题

比如我有一个<p>，下面有N个<span>，形式如下。
我想用jQuery找出其中data-value=1em的那个，并且把它的class种btn-default换成btn-primary。

请问这该怎么做啊？我想了半天没有想出来，希望大神指点，多谢！

1. 贴上相关代码

  <p id="fontSize" class="btn-group">
                        <button type="button" class="btn btn-default waves-effect" data-value="0.7em">特小</button>
                        <button type="button" class="btn btn-default waves-effect" data-value="0.85em">略小</button>
                        <button type="button" class="btn btn-default waves-effect" data-value="1em">默认</button>
                        <button type="button" class="btn btn-default waves-effect" data-value="1.2em">略大</button>
                        <button type="button" class="btn btn-default waves-effect" data-value="1.5em">特大</button>
                    </p>

1. 贴上报错信息

2. 贴上相关截图

3. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

$("#fontSize").find("button").each(function(){
    var el = $(this),
        data_val = el.attr("data-value");
    
    if(data_val === "1em"){
        //el.attr("class","btn btn-primary");
        el.removeClass("btn-default").addClass("btn-primary");
    }
})

Answer 2

$("[data-value='1em']")

Answer 3

给题主来一篇关于jQuery选择器的文章：http://www.360doc.com/content/13/1206/15/10504424_334970071.shtml
希望对题主有帮助；

Answer 4

$(".btn-group").find("[data-value='1em']").each(function(item){item.removeClass("btn-default").addClass("btn-primary"))})

Answer 5

$(".btn-group [data-value='1em']").removeClass("btn-default").addClass("btn-primary");