Target common parents child with JavaScript / jQuery

Question

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>

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?

`$(...).parents(...)[3]` gives you a node and not a jquery object. Thus there is no function `find()`. Check out [eq](https://api.jquery.com/eq/). — Lain, Nov 16 '21 at 12:01
You are appending that ```span``` to the document, which parents should it have? — prettyInPink, Nov 16 '21 at 12:02
@prettyInPink the span should be right where the js code is placed in the DOM. This is my workaround for missing a function that gives me the very recent object. — Famondir, Nov 16 '21 at 12:29

score 1 · Accepted Answer · answered Nov 16 '21 at 12:02

1

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.

answered Nov 16 '21 at 12:02

VeerJain89

111
5

This was the missing hint! I had to target the first element from find() with indexing [0] and than it worked. Many thanks! The solution was: `$($("#targetchild101").parents()[3]).find("img")[0].src = "https://moodle.htw-berlin.de/theme/image.php/boost_campus/forum/1636530372/icon";` – Famondir Nov 16 '21 at 12:20

prettyInPink · Answer 2 · 2021-11-16T12:17:33.113

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>

Thank you for the suggestion. I learned something new here. Unfortunately, there are more images with the same src and I just want to adjust a specific one of those. — Famondir, Nov 16 '21 at 12:15
You can target the image by its parent ```id```, or you won't know these either? — prettyInPink, Nov 16 '21 at 12:16
You will be able to use: ```yui_3_17_2_1_1637060405097_361```? — prettyInPink, Nov 16 '21 at 12:16
I updated the example using a parent id, those should be unique, so if you can get those it would only be applied to that specific image. — prettyInPink, Nov 16 '21 at 12:18
These ids are unique for each course and when we copy the course for the next semester these ids will change. Therefore, I looked for the solution with a relative targeting scince the structure (how many divs there are chained) will stay the same. — Famondir, Nov 16 '21 at 12:26

Target common parents child with JavaScript / jQuery

2 Answers2