Question

我希望从一系列幻灯片（部分和旁边元素）中获取每个ID，然后将这些ID分配给相应的导航元素的数据目标属性作为其值。我正在使用gridscroll.js插件，因此nav元素是动态创建的。

我使用的插件就在这里（如果有帮助）： https://github.com/mknecht/gridscrolling.js

我的HTML：（我想从每个元素中获取ID ...）

    <section id="section-1a"></section>

    <section id="section-2a"></section>
    <aside id="section-2b"></aside>
    <aside id="section-2c"></aside>
    <aside id="section-2d"></aside>

    <section id="section-3a"></section>
    <aside id="section-3b"></aside>
    <aside id="section-3c"></aside>

    <section id="section-4a"></section>
    <aside id="section-4b"></aside>

    <section id="section-5a"></section>

JQ我曾经为每个动态创建的nav元素添加一个属性。我刚插入数字作为占位符：

    $(document).ready(function(){
        $(".gridscrolling-overview-square").each(function(index) {
           $(this).attr("data-target", index);
    });

我抓住ID并将它们放入数组中：

        var slideids = $(".slides").map(function(){
            return this.id;
        }).get();

插件在页面加载时呈现的导航标记添加了我唯一的数据目标值：

（我希望将我抓取的ID值分配给每个相应的导航元素＆＃39;数据目标属性。导航项及其相应的幻灯片各自按顺序排列。）

    <div id="gridscrolling-overview">
        <div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="0"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-main gridscrolling-looking-at" data-target="1"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="2"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="3"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="4"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="5"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="6"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="7"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="8"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="9"></div>
        <div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="10"></div>
    </div>

此外，如果有一个比我开始的方法更好的方法，我可以接受建议：）

提前致谢！

Answer 1

如果一切顺序相同，这应该有效：

$(document).ready(function(){
    $(".gridscrolling-overview-square").each(function(index) {
       $(this).attr("data-target", slideids[index]);
});

如果没有，当你可以创建元素时，你可以用计数器为它们分配id，这样你就可以正确地映射事物：

$(this).attr("id", "slide"+index);

jQuery：从元素中获取ID并将它们作为属性值分配给其他元素

1 个答案: