使用JavaScript/jQuery定位常见的父子关系

Question

我已经开始使用javascript进行前端开发，我正试图用自定义js代码更改Moodle课程中的一个图标，但我无法将其作为目标。我试图从一个已知的起点导航到那里(我创建了一个带有id的span(，然后想走4步，用find((获取图像。但我似乎根本不能针对祖父母的任何孩子。

我在使用下面的代码之前加载了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>

我的主要问题是：如何针对祖父母的孙子女形象来改变其来源。我得到错误"；未捕获的类型错误：$(…(parents(…([3]。find不是函数"；那么，我该怎么做才能找到父母的孩子，而不是使用parents(([3]呢？

我的问题是：有没有比创建一个id为空的跨度更详细的方法来获得参考点？类似于$(文档(的当前函数？

Answer 1

您需要再次将HTML元素转换为jquery。如您的示例所示：$(…(.parents(…([3]需要是$($(

Answer 2

有很多方法可以针对图像或任何元素，如果您想在不使用任何父选择器或其他选择器的情况下更改此特定图像，可以通过其原始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>