css 类*= javascript 等价物答案

【问题标题】：css class*= javascript equivalentcss 类*= javascript 等价物
【发布时间】：2014-09-15 23:22:09
【问题描述】：

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

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

... 等等。是否有等效于 javascript 的 css 的 class*=，以便我只能调用具有匹配类号的“事物”？这是我目前所拥有的

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

【问题讨论】：

你用这些选择器做什么？这些元素中有什么？你想达到什么目的？
就像@Pointy 说的那样，知道你想要做什么会很有帮助。似乎有更好的方法来定义你的类，这将帮助你做你想做的事。
这个想法是，当用户点击thing_outside_1时，会打开thing_inside_1的特定对话框。 2、3 等也是如此。我在一页上有很多对话框，并且无论那里有多少对话框，我都希望它能够正常工作。
您可能对 jQuery .find() 方法感兴趣。
在下面查看我的答案。你不需要那么具体。 JS 知道你在点击什么div，所以你只需要在被点击的元素内部进行遍历。您不需要为此单独编号您的课程，如果您这样做了，它们将是 ID。

标签： javascript jquery css string numbers

【解决方案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，并使用它来查找关联的对话框。

【讨论】：

这似乎不再识别点击功能，知道我哪里出错了吗？
啊，我忘了 jQueryUI 会从 HTML 中的原始位置删除对话框，因此它们不再位于父级内部。见编辑。
非常感谢杰夫，你太棒了！

【解决方案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" ); 
});

【讨论】：