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 control-label no-padding-right

COL-SM-2

col-sm-8 frm_com ui-droppable

Answer 1

你没有得到你期望的第一个结果，因为你只是在寻找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+']')

Answer 2

您需要做出两项更改：

~~使用find以便搜索所有后代，而不只是children。~~ 不确定为什么我认为您的某个目标嵌套在另一个目标中，但它不是;如果您知道自己会成为孩子，那么children就可以了。
从div移除div[class^=...]限制，因为您要查找的其中一个元素是label，而不是div。

示例：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

但，那是脆弱的;它要求col-sm-位于class属性的开头。如果有人在开发之后添加了一个类，那么这将会破坏。

相反，使用＆＃34;包含＆＃34; （*=）作为粗略过滤器，然后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的开头{/ p>}：

＆＃13;

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);
    });

＆＃13;

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

＆＃13;

Answer 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选择，现在它将选择以类名开头的任何元素。

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

3 个答案: