javascript - 用jquery替换另一个div中的div id和文本

Question

背景: 我在页面上插入两个日历，它们都是在后端(Business Catalyst)生成的，因此除了日历应包含哪些事件之外，我无法控制日历。我遇到的问题是两个日历具有相同的 DIV ID。

我想要实现的目标: 页面加载后，我想使用 javascript 更改 (1) 第二个日历 的 DIV ID 和 (2) 对日历脚本内相同 ID 的引用。

这是包含两个日历的 html(已删除批量)

<div id="nav-8-1-default-hor-left--1" role="tabpanel">
    <h2>Social Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

<div id="nav-8-1-default-hor-left--2" role="tabpanel">
    <h2>Workshop Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

这是我尝试过的脚本，但没有效果:

<script>
$(document).on('ready', function() {
    //replace ID of second calendar and ref to its id in script
    $('#nav-8-1-default-hor-left--2').find('#calendar-container').attr("id", "#calendar-container2");
    $('#nav-8-1-default-hor-left--2').find('calendar-container').replace('calendar-container', 'calendar-container2');
});

我是 javascript/jquery 的新手，所以请解释你的答案

Answer 1

希望第二个日历中没有其他具有相同字符串的元素。

我已经完成了以下操作。

我获取了 <div id="nav-8-1-default-hor-left--2" role="tabpanel"> 的整个 html并将其存储在变量 x 中然后我使用 string.replace 方法将“calendar-container”替换为“calendar-container2”并获取新字符串。然后我将此字符串应用回 <div id="nav-8-1-default-hor-left--2" role="tabpanel"> 的 html .(我将“”div中所有位置的“calendar-container”替换为“calendar-container2”)

$(document).on('ready', function() {
    var x=$('#nav-8-1-default-hor-left--2').html();
    
    x=x.replace(/calendar-container/g,'calendar-container2');
    $('#nav-8-1-default-hor-left--2').html(x);
    console.log($('#nav-8-1-default-hor-left--2').html());
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-8-1-default-hor-left--1" role="tabpanel">
    <h2>Social Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

<div id="nav-8-1-default-hor-left--2" role="tabpanel">
    <h2>Workshop Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>