I have started with javascript for frontend development and I'm trying to alter an icon in a Moodle course with custom js code but I can't target it. I tried to navigate there from a known start point (I created a span with an id) and then wanted to go up 4 steps and grab the image with find(). But I can't target any child from the grand-grand-grand-parent at all it seems.

I loaded jquery before using the code below and of course there is more code for the whole Moodle site.

<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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

My main question is: how can I target the image that is a grand-child from a grand parent to change its source. I get the error "Uncaught TypeError: $(...).parents(...)[3].find is not a function" So what do I have to do to find a child of a parent instead of using parents()[3]?

My side question is: Is there a more elaborate way to get the reference point than to create an empty span with id? Something like a $(document).current function?

CodePudding user response：

You need to convert the HTML element again to jquery. As in your example: $(...).parents(...)[3] needs to be $($(...).parents(...)[3]) and then call find on it.

CodePudding user response：

There are many ways to target an image, or any element, if you want to change this specific image without using any parent selectors or other, you can select it by its original src attribute.

This is probably not how one should do it, ...

$('#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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>