Question

我有一个包含元素的重复元素列表，它们使用匹配的类号。想想

.thing_outside_1 > .thing_inside_1
.thing_outside_2 > .thing_inside_2
.thing_outside_3 > .thing_inside_3

......等等。有没有相当于css的类* = for javascript，所以我只能调用具有匹配类号的'thing'？这是我到目前为止所拥有的

$( ".thing_inside_" ).dialog();
$( ".thing_outside_" ).click(function() { $( ".thing_inside_" ).dialog( "open" ); });

Answer 1

为什么不使用.thing_outside和.thing_inside？

<div class="thing_outside" id="thing1">
    <div class="thing_inside"></div>
</div>

<div class="thing_outside" id="thing2">
    <div class="thing_inside"></div>
</div>

<div class="thing_outside" id="thing3">
    <div class="thing_inside"></div>
</div>

脚本：

$( ".thing_inside" ).dialog();
$( ".thing_outside" ).click(function() { 
    $(this).find( ".thing_inside" ).dialog( "open" );
});

编辑：我没想到你在这里使用jQuery dialog这一事实。 dialog从父项中删除元素并将其粘贴在文档正文的末尾。在这种情况下，此方法将无法正常工作。有很多方法可以解决这个问题。一个是这样做：

$( ".thing_outside" ).each( function() {
    var dialog = $(this).find( ".thing_inside" ).dialog();

    var dialogId = dialog.attr('id');
    $(this).data('dialogId', Id);

}).click( function() {
    var dialogId = $(this).data('dialogId');
    $('#'+dialogId).dialog("open");
});

演示：http://jsfiddle.net/jtbowden/3hn7j6ev/

在这种情况下，我们使用each循环遍历每个外部元素，为内部元素创建对话框并将其ID存储在外部元素的数据中。（如果您没有为内部元素提供ID，jQueryUI将为您创建一个ID，因此您不必担心它）。然后，在click上，我们只需检索ID，并使用它来查找关联的对话框。

Answer 2

我尽力提供您提供的有限信息的解决方案。

<div id="thing_outside_1" class="thing_outside" data-index="2">
    <div id="thing_inside_1" class="thing_inside"></div>
    <div id="thing_inside_2" class="thing_inside"></div>
    <div id="thing_inside_3" class="thing_inside"></div>
</div>

<div id="thing_outside_2" class="thing_outside" data-index="2">
    <div id="thing_inside_1" class="thing_inside"></div>
    <div id="thing_inside_2" class="thing_inside"></div>
    <div id="thing_inside_3" class="thing_inside"></div>
</div>

$( "#thing_inside_1" ).dialog(); 
$( "#thing_inside_2" ).dialog(); 
$( "#thing_inside_3" ).dialog(); 

$( ".thing_outside" ).click(function() {
    var index = $(this).attr("data-index");
    $( "#thing_inside_" + index ).dialog( "open" ); 
});

css class * = javascript等价物

2 个答案: