CODEWITHSUNDEEP
jqueryhtml
Andrew Walker
Andrew Walker

Reputation: 492

Trying to access element with custom attribute

The below image shows a div, and I am trying to access another element inside this.

div image

hype_scene_index=1

The above is the div which I need to look in.

var home = $('.home_' + element.innerHTML).find('div[hype_scene_index=1]');

So I am looking for a div with a class named home_O. There are more than one scene index, and their might be more than one instance of home_O, so I am looking for the closest one that matches an element. The element is a class named: letter, and it's innerHTML might be 'O'.

Ideal outcome is that the element within the parent is searched, and found so I can get the element ID, as its auto generated.

But my code keeps giving me null, so I assume its not finding the parent?

<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin: auto; position: relative; width: 750px; height: 400px; overflow: hidden; -webkit-transform-style: flat;" aria-live="polite" hyp_dn="index" aria-hidden="false">
    <script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?62731"></script>
    <div id="HYPE_persistent_symbols" aria-hidden="true" style="display: none;"></div>
    <div class="HYPE_scene" id="hype-scene-OjWA3NVziFMIKuSh" hype_scene_index="0" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element home_O" id="hype-obj-wesKKEBfzoAtPRxZ" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element letter" id="letter_U" style="pointer-events: auto;">U</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-waKDfvZQplJiCqeO" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="letter_L" style="pointer-events: auto;">L</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element letter" id="hype-obj-7ollG3cYWGzedsFl" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element letter" id="hype-obj-CscCOdYjMl41hKGi" style="pointer-events: auto;">W</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-3tEr1wAfKsMqpvu2" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="letter_D" style="pointer-events: auto;">D</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element letter" id="hype-obj-QhJNaIx9jqpTUf5q" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element letter" id="hype-obj-I80tbqlCSZETYuEZ" style="pointer-events: auto;">O</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-Iusjm7VpM40usoo0" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element home_W" id="hype-obj-nNtpj04d3AH9T6wf" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-5YaBwame06tuiSj4" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element home_U" id="hype-obj-rFxSKEz5Eukvr4ZJ" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-EuujdQE5TaxENR9k" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element home_L" id="hype-obj-10ZyCk0M63Fw2slH" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-6tUMHuYLAOzlSyxl" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element home_D" id="hype-obj-hXSdkjrNFocxYwmB" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-2xBwMAvPrZl3dOLx" style="pointer-events: auto;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-eRFLNRAxqYwORHwR" style="pointer-events: auto;">NEXT</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-nFfnSL7IdjX0axbL" style="pointer-events: auto;">Play Word</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-HnHXxR6ibWzr00Gt" style="pointer-events: auto;">Attempts</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="attWould" style="pointer-events: auto;">0</div>
        </div>
    </div>
    <div class="HYPE_scene" id="hype-scene-o2BqYOPBF2QH1PUw" hype_scene_index="1" aria-hidden="false" aria-flowto="hype-obj-UaS00dz2vE3iBhqe" style="background-color: rgb(255, 255, 255); display: block; overflow: hidden; position: absolute; width: 750px; top: 0px; left: 0px; height: 400px; -webkit-transform-origin: 50% 50%; -webkit-transform: translateZ(0px) rotateY(0deg); z-index: 1; opacity: 1;">
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 16;">
            <div class="HYPE_element home_O" id="hype-obj-UaS00dz2vE3iBhqe" aria-flowto="hype-obj-qPeLTvGhcjw2VjHy" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); background-color: rgb(232, 235, 237); overflow: visible; z-index: 16; width: 100px; height: 100px; top: 133px; left: 18px;"></div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 15;">
            <div class="HYPE_element" id="hype-obj-2QwLlYCvjNdrWcn8" aria-flowto="hype-obj-SQrNXiMZLdjtTO2x" style="pointer-events: auto; position: absolute; overflow: visible; z-index: 15; width: 90px; height: 93px; top: 249px; left: 24px;">
                <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 23;">
                    <div class="HYPE_element letter" id="hype-obj-qPeLTvGhcjw2VjHy" aria-flowto="hype-obj-2QwLlYCvjNdrWcn8" style="pointer-events: auto; position: absolute; z-index: 23; border: 1px solid rgb(216, 221, 228); -webkit-user-select: none; background-color: rgb(232, 235, 237); -webkit-transform-origin: 50% 50%; -webkit-transform: rotateY(0deg); line-height: 95px; font-size: 96px; text-align: center; font-weight: bold; cursor: move; overflow: visible; width: 88px; height: 91px; top: -11px; left: 0px;">O</div>
                </div>
            </div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 13;">
            <div class="HYPE_element" id="hype-obj-SQrNXiMZLdjtTO2x" role="button" aria-flowto="hype-obj-P4Ab8SRhfBmvdNZl" style="pointer-events: auto; position: absolute; z-index: 13; border: 1px solid rgb(160, 160, 160); padding: 6px; opacity: 0; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 55px; height: 15px; top: 220px; left: 665px;">NEXT</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 12;">
            <div class="HYPE_element" id="hype-obj-P4Ab8SRhfBmvdNZl" role="button" aria-flowto="hype-obj-Fx4hwSdz6cqIV42C" style="pointer-events: auto; position: absolute; z-index: 12; border: 1px solid rgb(160, 160, 160); padding: 6px; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 90px; height: 15px; top: 16px; left: 262px;">Play Word</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 10;">
            <div class="HYPE_element" id="hype-obj-Fx4hwSdz6cqIV42C" aria-flowto="attOr" style="pointer-events: auto; position: absolute; padding: 8px; overflow: visible; word-wrap: break-word; z-index: 10; white-space: nowrap; font-family: Helvetica, Arial, sans-serif; font-size: 12px; display: inline; color: rgb(0, 0, 0); font-weight: bold; top: 0px; left: 0px;">Attempts</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 9;">
            <div class="HYPE_element" id="attOr" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); line-height: 28px; background-color: rgb(232, 235, 237); overflow: visible; z-index: 9; text-align: center; width: 34px; height: 28px; top: 23px; left: 14px;">0</div>
        </div>
    </div>
    <div class="HYPE_scene" id="hype-scene-2YkRRXgevxQb8pAU" hype_scene_index="2" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-te69tWEj33olYKwS" style="pointer-events: auto;">Math is awesome and everyone should know it!</div>
        </div>
        <div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
            <div class="HYPE_element" id="hype-obj-sYebDLAnAIGcH1H7" style="pointer-events: auto;">This is a story about Math!</div>
        </div>
    </div>
</div>
<!-- end copy -->

Upvotes: 0

Views: 273

Answers (3)

Andrew Walker
Andrew Walker

Reputation: 492

Thanks to @Benjamin Ray, I have managed to fix this deep find issue with the following code:

var home = $(element).closest($('.HYPE_scene')).find($('.home_' + element.innerHTML));

NOTE: $(element) is the draggable div, looking for its closest corresponding home.

Upvotes: 0

Benjamin Ray
Benjamin Ray

Reputation: 1870

find() searches down the DOM tree (children), and closest() searches the next matching parent up the DOM tree.

Here are some examples of how you can move between your elements, assuming you have the element from which you are getting the letter (e.g. element.innerHTML):

JavaScript:

// Not sure how you get element in the first place, but I trust this gives you the letter (e.g. 'O')
var letter = element.innerHTML;

// To get the parent HYPE_scene from home_O:
var parent = $('.home_' + letter).closest('.HYPE_scene');

// To get the child with the ID letter_O:
var child = parent.find('#letter_' + letter);

// Modified version of the JS you originally posted:
var home = $('.home_' + letter).closest('div[hype_scene_index=1]');

Upvotes: 1

Joseph
Joseph

Reputation: 13178

You are using .find() to try to find a parent, when .find() is only useful for finding children. Instead, use .closest():

var $home = $('.home_O').closest('div[hype_scene_index=1]');

Upvotes: 0

Related Questions