Question

下图显示了一个div，我正在尝试访问其中的另一个元素。

div image

hype_scene_index = 1

以上是我需要查看的div。

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

所以我正在寻找一个名为home_O的类的div。有多个场景索引，它们可能是home_O的多个实例，因此我正在寻找与元素匹配的最接近的场景索引。该元素是一个名为：letter的类，它的innerHTML可能是＆＃39; O＆＃39;

理想的结果是搜索父元素中的元素，并找到它，因此我可以获取元素ID，因为它是自动生成的。

但是我的代码一直给我null，所以我认为它没有找到父代？

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

Answer 1

find（）搜索DOM树（子），而nearest（）搜索DOM树中的下一个匹配父项。

以下是一些如何在元素之间移动的示例，假设您有从中获取字母的元素（例如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]');

Answer 2

当.find()仅对查找孩子有用时，您正在使用.find()尝试查找父母。相反，请使用.closest()：

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

Answer 3

感谢@Benjamin Ray，我已设法使用以下代码修复此深度查找问题：

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

注意：$（元素）是可拖动的div，寻找最接近的相应主页。

尝试使用自定义属性访问元素

3 个答案: