如何找到匹配类名的所有id attr？

Question

我已关注HTML，我希望在r_on

中获取标签类为<ul class="plan">...</ul>的所有广播ID

<ul class="plan">
    <li>
        <p>One Month</p>
        <label for="36" class="label_radio">
            <input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
        </label>
        <strong>300 $</strong>
    </li>
    <li>
        <p>Second Month</p>
        <label for="37" class="label_radio r_on">
            <input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
        </label>
        <strong>600$</strong>
    </li>
    <li>
        <p>Third Month</p>
        <label for="38" class="label_radio r_on">
            <input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
        </label>
        <strong>1200 $</strong>
    </li>
</ul>

注意：我想用逗号分隔的字符串结果。

我想要这样的结果：37,38

任何想法如何用jQuery做到这一点？

Answer 1

尝试使用$.fn.map方法：

var ids = $('.r_on :radio').map(function() {
    return this.id;
}).get().join();

查看演示。

var ids = $('.r_on :radio').map(function() {
    return this.id;
}).get().join();

alert(ids);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="plan">
    <li>
        <p>One Month</p>
        <label for="36" class="label_radio">
            <input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
        </label>
        <strong>300 $</strong>
    </li>
    <li>
        <p>Second Month</p>
        <label for="37" class="label_radio r_on">
            <input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
        </label>
        <strong>600$</strong>
    </li>
    <li>
        <p>Third Month</p>
        <label for="38" class="label_radio r_on">
            <input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
        </label>
        <strong>1200 $</strong>
    </li>
</ul>

Answer 2

var ids = [];
    $('.r_on :radio').each(function() {
       ids.push(this.id);
    });
 alert(ids);

检查此演示。

＆＃13;

＆＃13;

var ids = [];
    $('.r_on :radio').each(function() {
   ids.push(this.id);
});
alert(ids);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="plan">
    <li>
        <p>One Month</p>
        <label for="36" class="label_radio">
            <input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
        </label>
        <strong>300 $</strong>
    </li>
    <li>
        <p>Second Month</p>
        <label for="37" class="label_radio r_on">
            <input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
        </label>
        <strong>600$</strong>
    </li>
    <li>
        <p>Third Month</p>
        <label for="38" class="label_radio r_on">
            <input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
        </label>
        <strong>1200 $</strong>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个..

<ul class="plan">
    <li>
        <p>One Month</p>
        <label for="36" class="label_radio">
            <input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
        </label>
        <strong>300 $</strong>
    </li>
    <li>
        <p>Second Month</p>
        <label for="37" class="label_radio r_on">
            <input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
        </label>
        <strong>600$</strong>
    </li>
    <li>
        <p>Third Month</p>
        <label for="38" class="label_radio r_on">
            <input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
        </label>
        <strong>1200 $</strong>
    </li>
</ul>

<script>
$('.plan .r_on input').each(function () {
    var ar = this.id;
  alert(ar);
});
</script>