在使用类找到的变量 ID 中定位 div

Posted 2023-02-18

【中文标题】在使用类找到的变量 ID 中定位 div

【英文标题】：Targeting divs inside a variable ID found using a class

【发布时间】：2015-03-10 06:49:37

【问题描述】：

我需要在 div 'myId' 中的一些元素中添加各种 ID、href 和 data-parent 属性——我想返回给定的 div 的 ID类：".template-none .section-accordion .accordion"。

这里的障碍是我使用的系统是拖放式的，因此这些元素将根据用户决定添加的数量而变化。每个元素的 ID 在放置时创建，但类保持不变。

现在，这些 是 内联的，但在检查时似乎有 -1 的 index，这意味着它们可能不会被视为列出的元素。我曾考虑使用.sibling，但在实施过程中遇到了困难，因为在创建 ID 之前我不知道它。

我目前正在使用它，但是，我下面的 jQuery 只获取第一项的 ID 和索引，而不是单独设置每个实例的样式。我知道这可能是我错过的非常简单的事情。

所以，总而言之，我想实现：

使用类“template-none .section-accordion .accordion”定位所有元素，并返回 ID。 使用现在定位的变量 ID，我想定位子元素 .accordion、.accordion-toggle 和 .accordion-body 以添加 ID 和元素。 确保"template-none .section-accordion .accordion" 的每个实例的样式都相对于其父项或作为单个项进行设置，并将其应用于"template-none .section-accordion .accordion" 的所有实例，而不是基于每个ID。

我希望这是有道理的，非常感谢您的意见

这是我目前所拥有的：

jQuery(window).load(function() 

    // sort accordions and add id's based on parents

    var index = jQuery( ".template-none section.section-accordion" ).index( this );

    var myId = jQuery(".template-none .section-accordion").prop("id");

    jQuery(".template-none .section-accordion .accordion").attr("id", myId + index)
    jQuery(".template-none .section-accordion .accordion-toggle").attr("data-parent", myId + index)

    jQuery(".template-none .section-accordion .accordion-body").attr("id", myId + index + 'body')
    jQuery(".template-none .section-accordion .accordion-toggle").attr("href", '#' + myId + index + 'body')

);

【问题讨论】：

你有一个 jsfiddle 来显示你的 html 标记吗？在阅读“动态”ID 时，我首先想到的是事件委托。当页面加载时不存在 div 时，js 中的直接选择器将不起作用，因为它在页面加载时被绑定。但是如果你将它包装在一个 div 中，并选择包装器，它会起作用。在此处阅读更多信息：learn.jquery.com/events/event-delegation

很有趣，谢谢，我会看看并报告。我可以肯定地在小提琴中发布标记。 jsfiddle.net/w1bg5gwq 这是我当前的 jQuery 代码给出的结果。两个不同的 ID 部分，但 js 基于第一个部分对两者都应用相同的部分。下面可能会再创建 10 个，它们都需要动态地进行相同的处理。 PS注意返回的索引是-1。

您的示例和 JSFiddle 不完整（例如，没有 .template-none 并且 index(this) 没有意义，因为 this 是那里的 window 对象）。请提供其余的 HTML 和 jQuery。

@TrueBlueAussie 抱歉，试试这个：jsfiddle.net/w1bg5gwq/5 这是不完整的，因为第一个家伙只要求 HTML，但我认为你的观点没有帮助。我的问题是用户可以添加那里显示的“部分”，所以我无法预见会有多少，这就是为什么我试图从类引用中提取 ID 并使用它的原因。部分 ID 是随机生成的。干杯

现在看。请注意，您的 div 嵌套缺少一些关闭 div... 需要使用干净的格式（JSFiddle 中的 TidyUp 按钮会有所帮助）。

【参考方案1】：

首先是问题：

您需要将每个部分与其自身作为当前上下文进行处理。目前，您的代码正在将 document 传递给 index，因为这是 DOM 就绪的上下文。 您有一个以# 开头的部分的 id，这是无效的。

相反，迭代您的部分（例如使用each）并修改后代元素相对于该部分（例如使用该部分的查找）。

例子：

jQuery(function ($) 
    // sort accordions and add id's based on parents
    var index = jQuery(".template-none section.section-accordion").each(function (index) 
        var myId = $(this).attr('id');
        $(this).find(".accordion").attr("id", myId + index);
        $(this).find(".accordion-toggle").attr("data-parent", myId + index).attr("href", '#' + myId + index + 'body');
        $(this).find(".accordion-body").attr("id", myId + index + 'body');
    );
);

要玩的 JSFiddle：http://jsfiddle.net/TrueBlueAussie/w1bg5gwq/7/

注意事项：

jQuery(function($)...); 是 jQuery(document).ready(function()...); 的便捷快捷方式，它还提供了一个本地 $ 变量，因此您可以使用更短的标准 jQuery 代码。 虽然您在每个部分的后代元素上生成唯一 ID，但通常使用类会更好。

【讨论】：

真的很有帮助，感谢@TrueBlueAussie，非常感谢。我曾尝试使用 .each 选择器，但没有考虑使用 .find ，这很有意义。

非常方便的提示。我很欣赏你关于使用类的第二个要点，但是开箱即用的 Bootstrap 手风琴的功能需要 ID 正确链接。你会很高兴知道现在拖放功能非常好:)