如何获取父 div 中每个 HTML 组件的类属性？答案

【问题标题】：How to get the class property for each HTML component inside a parent div?如何获取父 div 中每个 HTML 组件的类属性？
【发布时间】：2017-08-13 13:34:51
【问题描述】：

社区大家好。

这是我的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 control-label no-padding-right

col-sm-2

col-sm-8 frm_com ui-droppable

【问题讨论】：

您能否进一步澄清这个问题？你已经有JS代码了吗？如果是这样，您面临的错误是什么？
@jithinpt：OP 的代码没有找到他/她想要找到的所有三个元素。

标签： javascript jquery html

【解决方案1】：

你需要做的两个改变：

~~使用find，这样您就可以搜索所有后代，而不仅仅是children。~~ 不知道为什么我认为您的一个目标嵌套在另一个目标中，但事实并非如此'吨；所以children 可以，如果你知道他们会是孩子的话。
从div[class^=...] 中删除div 限制，因为您要查找的元素之一是label，而不是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 属性的开始。如果有人在以后的开发中在它之前添加一个类，这将会中断。

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

$('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>

【讨论】：

【解决方案2】：

你没有得到你期望的第一个结果，因为你只是在寻找 div。

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

如果您更改选择器，它将按预期工作

.children('*[class^='+col_sm+']')

【讨论】：

【解决方案3】：

此解决方案可行：

var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
$('div[kyros='+div_parent+']').find('[class^='+col_sm+']').each(function () {
    alert($(this).attr('class'));
    console.log($(this).attr('class'));
});

解决方案如下：https://jsfiddle.net/txmmboxf/

我已经更新了它的 lebel 选择，现在它将选择任何以类名开头的元素。

【讨论】：