Question

我对使用“data”属性的JQuery选择器有疑问。我需要得到一个具有特定类并具有特定数据属性的div。这是我的HTML：

<div class="container" name="templates-list" id="templates-list" style="width: 700px;">
    <div class="panel panel-default tmpl-select-panel" data-index="0" style="width: 700px;" title="Partite totali giocate da ogni squadra: 6">
        <div class="panel-body">
            <div class="panel panel-default tmpl-select-phase-panel pull-left" style="width: 170px; margin-right:20px;margin-bottom:0px">
                <div class="panel-heading">Fase 1</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Squadre: </div>
                                <div class="col-md-2 tmpl-select-value">12</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Gironi: </div>
                                <div class="col-md-2 tmpl-select-value">2</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Sq./girone: </div>
                                <div class="col-md-2 tmpl-select-value">6</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Partite/sq.: </div>
                                <div class="col-md-2 tmpl-select-value">5</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default tmpl-select-phase-panel pull-left" style="width: 100px; margin-right:-20px; margin-bottom:0px">
                <div class="panel-heading">Fase Finale</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Squadre: </div>
                                <div class="col-md-2 tmpl-select-value">2</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Partite/sq.: </div>
                                <div class="col-md-2 tmpl-select-value">1</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default tmpl-select-panel" data-index="1" style="width: 700px;" title="Partite totali giocate da ogni squadra: 4">
        <div class="panel-body">
            <div class="panel panel-default tmpl-select-phase-panel pull-left" style="width: 170px; margin-right:20px;margin-bottom:0px">
                <div class="panel-heading">Fase 1</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Squadre: </div>
                                <div class="col-md-2 tmpl-select-value">12</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Gironi: </div>
                                <div class="col-md-2 tmpl-select-value">4</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Sq./girone: </div>
                                <div class="col-md-2 tmpl-select-value">3</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Partite/sq.: </div>
                                <div class="col-md-2 tmpl-select-value">2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default tmpl-select-phase-panel pull-left" style="width: 100px; margin-right:-20px; margin-bottom:0px">
                <div class="panel-heading">Fase Finale</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Squadre: </div>
                                <div class="col-md-2 tmpl-select-value">4</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-10 tmpl-select-label">Partite/sq.: </div>
                                <div class="col-md-2 tmpl-select-value">2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的JQuery代码：

$('#templates-list').find(".tmpl-select-panel[data-index='1']")

此代码不返回任何对象。

哪里错了？

更新

在同一页面中，我有其他类似的JQuery代码;

$('#templates-list').on('mouseenter', '.tmpl-select-panel', function(event) {
            $(this).find('.tmpl-select-phase-panel').removeClass('panel-default');
            $(this).find('.tmpl-select-phase-panel').addClass('panel-primary');
        });

工作正常。

分辨

主div“＃templates-list”中包含的div元素是在POST请求后动态创建的。在我尝试选择其中一个元素时，尚未创建元素。

Answer 1

你的选择器应该很好，只是你当前没有提供与你匹配的标记中的元素（即没有带check_range('/api_vod_asset/v0/assets/0', [0,3]) #True check_range('/api_vod_asset/v0/assets/1', [0,3]) #True check_range('/api_vod_asset/v0/assets/5', [0,3]) #False的元素属性。

您会注意到，如果您使用data-index="2"或data-index="0"，您会看到选择器的工作方式如下：

data-index="1"

会产生：

enter image description here

你可以see a working example of this here。

Answer 2

试一试。对我很好..

 $('#templates-list').find("div.tmpl-select-panel[data-index='0']"); //its working fine.

我可以看到没有div元素具有类似data-index='2'的属性。所以我刚试过data-index='0'。对我来说工作正常

使用“data”属性的JQuery选择器

2 个答案: