javascript - 如何获取父 div 内每个 HTML 组件的 class 属性？

Question

社区您好。

这是我的HTML代码，我想要的是获取类属性，仅那些以'col-sm-'开头的类属性，并且位于父div内部，仅通过属性'kyros'来识别它

<div id="div_wid_001" class="widget-main">
    <div kyros="div_frm_gro_001" class="form-group">
        <label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
        <div class="col-sm-2">
            <input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
            <div class="button-wrapper">
                <a href="#" id="hre_edi_txt_001" class="btn_editar"><i class="ace-icon fa fa-pencil-square-o"></i></a>
                <a href="#" id="hre_rem_txt_001" class="btn_remover"><i class="ace-icon fa fa-times"></i></a>
            </div>
        </div>
        <div id="div_sm_003" class="col-sm-8 frm_com ui-droppable"></div>
    </div>
</div>

JS:

var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
/// 

$('div[kyros='+div_parent+']').children('div[class^='+col_sm+']').each(function () {
    var kyr_class = $(this).attr('class');
    console.log(kyr_class);
});

您应该得到以下结果:

col-sm-2 控制标签无填充右

col-sm-2

col-sm-8 frm_com ui-droppable

Answer 1

您需要进行两项更改:

1. 使用find，这样你就可以搜索所有后代，而不仅仅是 child 。不知道为什么我认为你的一个目标嵌套在另一个目标中，但事实并非如此；所以children如果你知道他们会是 child 就很好。

2. 从 div[class^=...] 中删除 div 限制，因为您要查找的元素之一是 标签，而不是div。

示例:

var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
/// 

$('div[kyros='+div_parent+']')
    .children('[class^='+col_sm+']')
    .each(function () {
        var kyr_class = $(this).attr('class');
        console.log(kyr_class);
});

<div id="div_wid_001" class="widget-main">
    <div kyros="div_frm_gro_001" class="form-group">
        <label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
        <div class="col-sm-2">
            <input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
            <div class="button-wrapper">
                <a href="#" id="hre_edi_txt_001" class="btn_editar"><i class="ace-icon fa fa-pencil-square-o"></i></a>
                <a href="#" id="hre_rem_txt_001" class="btn_remover"><i class="ace-icon fa fa-times"></i></a>
            </div>
        </div>
        <div id="div_sm_003" class="col-sm-8 frm_com ui-droppable"></div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是，这很脆弱；它要求 col-sm- 位于 class 属性的开头。如果有人在开发后期在它之前添加一个类，这就会中断。

相反，使用“包含”(*=) 作为粗略过滤器，然后过滤对其进行微调:

$('div[kyros='+div_parent+']')
    .children('[class*='+col_sm+']') // or .find to include descendants
    .filter(function() {
        // Filter out foo-col-sm-, requiring that col-sm- be at the
        // beginning of the string or after a space
        return this.className.startsWith(col_sm) || this.className.indexOf(" " + col_sm) != -1;
    })
    . // ...

示例(我更改了第三个匹配项，因此 col-sm- 不在 class 的开头):

var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
/// 

$('div[kyros='+div_parent+']')
    .children('[class*='+col_sm+']')
    .filter(function() {
        return this.className.startsWith(col_sm) || this.className.indexOf(" " + col_sm) != -1;
    })
    .each(function () {
        var kyr_class = $(this).attr('class');
        console.log(kyr_class);
    });

<div id="div_wid_001" class="widget-main">
    <div kyros="div_frm_gro_001" class="form-group">
        <label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
        <div class="col-sm-2">
            <input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
            <div class="button-wrapper">
                <a href="#" id="hre_edi_txt_001" class="btn_editar"><i class="ace-icon fa fa-pencil-square-o"></i></a>
                <a href="#" id="hre_rem_txt_001" class="btn_remover"><i class="ace-icon fa fa-times"></i></a>
            </div>
        </div>
        <div id="div_sm_003" class="ui-droppable col-sm-8 frm_com"></div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>