目标共同 parents child 与 JavaScript / jQuery

Question

我已经开始使用 javascript 进行前端开发，我正在尝试使用自定义 js 代码更改 Moodle 课程中的图标，但我无法定位它。我试图从一个已知的起点导航到那里（我创建了一个带有 id 的跨度），然后想向上走 4 步并使用 find() 抓取图像。但我似乎根本无法从 grand-grand-grand-parent 中定位任何 child。

我在使用下面的代码之前加载了 jquery，当然整个 Moodle 站点还有更多代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="activity hvp modtype_hvp " id="module-1083815">
    <div id="yui_3_17_2_1_1637060405097_363">
        <div class="mod-indent-outer w-100" id="yui_3_17_2_1_1637060405097_362">
            <div class="mod-indent">
            </div>
            <div id="yui_3_17_2_1_1637060405097_361">
                <div class="activityinstance">
                    <a class="aalink dimmed" onclick="" href="https://moodle.htw-berlin.de/mod/hvp/view.php?id=1083815">

<!-- I want to change this image -->
                        <img src="https://moodle.htw-berlin.de/theme/image.php/boost_campus/hvp/1636530372/icon" class="iconlarge activityicon" alt="" role="presentation" aria-hidden="true">
                        <span class="instancename">Business Proficiency - Telephoning
                            <span class="accesshide "> Interactive Content</span>
                        </span>
                    </a>
                </div>
                <div class="contentafterlink  dimmed_text" id="yui_3_17_2_1_1637060405097_360">
                    <div class="no-overflow" id="yui_3_17_2_1_1637060405097_359">
                        <div class="no-overflow" id="yui_3_17_2_1_1637060405097_358">
                            <script type="text/javascript">
                                document.write("<span id='targetchild101'>findmyparent</span><br>");
                                document.write($("#targetchild101").parents()[3].tagName);


<!-- I can't target children() or find() children from the parent -->
                $("#targetchild101").parents()[3].find("img").src = "https://moodle.htw-berlin.de/theme/image.php/boost_campus/forum/1636530372/icon";
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

我的主要问题是：我怎样才能从宏大的 parent 定位 grand-child 的图像来更改其来源。我收到错误消息“Uncaught TypeError: $(...).parents(...)[3].find is not a function” 那么我需要做什么才能找到 child 的 parent 而不是使用 parents()[3]?

我的附带问题是：是否有比创建带有 id 的空跨度更精细的方法来获取参考点？类似于 $(document).current 函数？

Answer 1

您需要将 HTML 元素再次转换为 jquery。如您的示例所示： $(...).parents(...)[3] 需要是 $($(...).parents(...)[3]) 然后调用 find 就可以了。

Answer 2

定位图像或任何元素的方法有很多种，如果您想在不使用任何父级 select 或其他元素的情况下更改此特定图像，您可以 select 通过其原始图像src 属性。

这可能不是一个人应该做的，...

$('#yui_3_17_2_1_1637060405097_361 img').attr('src','https://moodle.htw-berlin.de/theme/image.php/boost_campus/forum/1636530372/icon');
//$('img[src="https://moodle.htw-berlin.de/theme/image.php/boost_campus/hvp/1636530372/icon"]').attr('src','https://moodle.htw-berlin.de/theme/image.php/boost_campus/forum/1636530372/icon');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="activity hvp modtype_hvp " id="module-1083815">
    <div id="yui_3_17_2_1_1637060405097_363">
        <div class="mod-indent-outer w-100" id="yui_3_17_2_1_1637060405097_362">
            <div class="mod-indent">
            </div>
            <div id="yui_3_17_2_1_1637060405097_361">
                <div class="activityinstance">
                    <a class="aalink dimmed" onclick="" href="https://moodle.htw-berlin.de/mod/hvp/view.php?id=1083815">

<!-- I want to change this image -->
                        <img src="https://moodle.htw-berlin.de/theme/image.php/boost_campus/hvp/1636530372/icon" class="iconlarge activityicon" alt="" role="presentation" aria-hidden="true">
                        <span class="instancename">Business Proficiency - Telephoning
                            <span class="accesshide "> Interactive Content</span>
                        </span>
                    </a>
                </div>
                <div class="contentafterlink  dimmed_text" id="yui_3_17_2_1_1637060405097_360">
                    <div class="no-overflow" id="yui_3_17_2_1_1637060405097_359">
                        <div class="no-overflow" id="yui_3_17_2_1_1637060405097_358">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

目标共同 parents child 与 JavaScript / jQuery

Target common parents child with JavaScript / jQuery

javascript

html

jquery

moodle