如何查找所有具有匹配类名的id属性

How to find all id attr with matching class name?

本文关键字：属性 id 查找 何查找      更新时间：2023-09-26

我有以下HTML，我想在<ul class="plan">...</ul> 中获取所有标签类为r_on的无线电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做到这一点吗？

尝试使用$.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>

试试这个。。

<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>

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

查看此演示。

var ids = [];
    $('.r_on :radio').each(function() {
   ids.push(this.id);
});
alert(ids);
<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>

相关文章：