Javascript 获取具有特定类的元素的id

嗨，我想使用jquery或javascript获取具有特定类的元素的id

这是完整的代码，而且很长，这导致我在使用checkDet函数时没有定义

<div class="col-sm-12" style="background-color: #fafafa; padding-top:20px; padding-bottom:20px;">
                <div class="p-property-start">
                <div class="p-property-item">


                    <div class="col-sm-2">
                    <p class="p-item-title">Color:</p>
                    </div>

                    <div class="col-sm-10">
                    <span class="p-item-main">
                        <ul class="colo-list">
                            <?php $notacol = DataDB::getInstance()->get_rows_from_field('product_color','product_id',$value);
                                    foreach($notacol as $col){
                            ?>
                                <li class="colo-list-image" id="col<?php echo $col['product_color_id']; ?>" onclick="selectColor<?php echo $col['product_color_id']; ?>()">
                                <a>
                                    <img src="img/product/icon/<?php echo $col['image']; ?>" title="<?php echo $col['color_name']; ?>">
                                </a>
                                </li>

<script>

function selectColor<?php echo $col['product_color_id']; ?>(){
var pro_col = <?php echo $col['product_color_id']; ?>;
var ins = 'prosi';
var d = document.getElementById("col<?php echo $col['product_color_id']; >");
$('.active').removeClass('active');
d.className += " active";


$.ajax({
         type: 'post',
         url: 'frextra.php',
        data: "pro_col=" + pro_col + "&ins=" + ins,
             success: function(data)
        {   
            document.getElementById("sizecover").style.display = "block";
            jQuery('#siz').html(data).show(); 
        }
    });

}           

</script>   
                            <?php } ?>

                        </ul>
                    </span>
                    </div>
                </div>
                </div>


                <div class="p-property-start" style="margin-top:50px; display:none;" id="sizecover">
                    <div class="p-property-item">
                        <div class="col-sm-2">
                        <p class="p-item-title">Size:</p>
                        </div>

                <div class="col-sm-10">
                    <span class="p-item-main">
                        <ul class="colo-list" id="siz">

                        </ul>
                    </span>

                    </div>
                </div>
<script>

function selectSize(ID){
var d = document.getElementById("siz"+ID);
$('.sactive').removeClass('sactive');
d.className += " sactive";
}           

</script>
                </div>

                <div class="p-property-start" style="margin-top:10px;">
                    <div class="p-property-item">
                        <div class="col-sm-2">
                        <p class="p-item-title">Quantity:</p>
                        </div>

                        <div class="col-sm-10">

                            <fieldset style="padding-top:10px;">
                                <input type="number" id="quantityfr" value="1">
                                <span style="color: #999;">Quantity left (594686 pieces available)</span>
                            <fieldset>
                        </div>
                    </div>

                </div>

                <div class="col-sm-12 p-property-padd" style="padding-top:30px;">
                <div class="p-property-item">

                    <input type="button" name="submit" value="Add to cart" onclick="checkDet()" class="button biz-btn" style="font-size: 15px; border-radius: 3px; padding: 10px;">

                    <a onclick="saveWishlist()" class="add-wish" style="padding-left:20px; font-size:16px;">
                    <i class="fa fa-heart add-wish-heart" id="heart"></i>
                    <span>Add to wishlist</span>
                    </a>
                </div>
                </div>

            </div>
<script>
   function checkDet(){
   var abc = $(this).closest("colo-list-image active").attr("id");
   console.log(abc);
   }
</script>

颜色：

">

函数selectColor（）{
var prou col=；
var-ins=‘prosi’；
var d=document.getElementById（“col这应该可以用

为什么不把$col['product\u color\u id']作为标签img上的值并这样做呢

function FindClass(){
    $( "li" ).each(
        function(){
            if($(this).attr('class')=='colo-list-image active'){
                console.log($(this).find('ul').find('a').find('img').attr('value'));
            }
        }
    );
}

还可以另存为数组

var arr = [];
function FindClass(){
    $( "li" ).each(
        function(){
            if($(this).attr('class')=='colo-list-image active'){
                arr.push($(this).find('ul').find('a').find('img').attr('value'));
            }
        }
    );
}

请注意，arr在函数外部，因此它是一个全局变量，您可以使用
checkDet（）
中的
这
指的是什么？您如何调用该函数？还请注意
closest（）
需要选择器前缀，因此它应该是
.closest（.colo list image.active”）.prop（'id'）
$（此）.closest（“.colo list image.active”）.attr（“id”）；检查点。感谢您的编辑。您调用
checkDet（）
的方式意味着
此
将是
窗口，而不是引发事件的元素。我建议使用
单击（）
处理程序，而不是在*
事件属性上过时的
。此外，
输入
似乎与之前发布的HTML不相关，因此我看不出
最近（）
也可以。你建议我怎么做@RoryMcCrossanAre让你通过php中的foreach，将产品id添加到col中。对吗？这很难帮助你，因为我们不知道按钮在哪里，也不知道你想要哪个id。你想要所有元素的id都有特定的类？
$（this）。css（'colo-list-image active'）
？至少它现在可以在逻辑上工作，尽管它仍然非常脆弱，而且比OPs的原始版本要冗长得多，而OPs的原始版本应该已经以更简洁的方式工作了。显然，这里还有另一个OP没有向我们提供详细信息的问题。