在使用 class 找到的变量 ID 内定位 div

Question

我需要向 div 'myId' 中的几个元素添加各种 ID、href 和 data-parent 属性 - 我想return 具有给定 class 的 div 的 ID：".template-none .section-accordion .accordion"。

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

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

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

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

以 class "template-none .section-accordion .accordion" 和 return ID 为目标的所有元素。
使用现在定位的变量 ID，我想针对子元素 .accordion、.accordion-toggle 和 .accordion-body 添加 ID 和元素。
确保 "template-none .section-accordion .accordion" 的每个实例都相对于其父项设置样式或作为 individual 项目，并将其应用于 "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')

});

Answer 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，但通常最好使用类。

在使用 class 找到的变量 ID 内定位 div

Targeting divs inside a variable ID found using a class

variables

indexing

jquery

jquery-selectors