jQuery - 从未知的 HTML 中获取最近的 div答案

【问题标题】：jQuery - Getting the closest div from unknown HTMLjQuery - 从未知的 HTML 中获取最近的 div
【发布时间】：2022-11-14 21:27:31
【问题描述】：

我正在尝试从另一个元素中获取最接近的 div。我的用例：

我在 AJAXing 时使用微调器作为占位符。微调器仅受父 div 影响，这意味着我可以在一页上有多个微调器。

我想我可以为此重用一个函数，但我永远无法获得微调器 div。

我的例子：

<div>
    <div>
        <p></p>
    </div>

    <div>
        <p></p>
    </div>

    <div>
        <h4></h4>
        <div></div>
        <div></div>
    </div>

    <div id='wrapper'>
        <div class='ajax_spinner'></div>
        <div>
            <h4></h4>
            <div>
                <button>
                </button>
            </div>
        </div>
        <div>
            <h4>
            </h4>
            <div>
                <button id='1659'>
                    3XL
                </button>
                <button id='1662'>
                    4XL
                </button>
                <button id='1650'>
                    L
                </button>
                <button id='1647'>
                    M
                </button>
                <button id='1644'>
                    S
                </button>
                <button id='1653'>
                    XL
                </button>
                <button id='1641'>
                    XS
                </button>
                <button id='1656'>
                    XXL
                </button>
            </div>
        </div>
    </div>
    <div>
        <button id='add_to_cart'>
            Add to Cart
            <div class='ajax_spinner'></div>
        </button>
    </div>
</div>

在上面的示例中，我有一个微调器，它在单击大小按钮时应该会影响相当大的区域（包装器 div）。但也有一个仅用于添加到购物车按钮的微调器。所以我永远无法确切知道我在哪里拥有 ajax_spinner。

我尝试了findSpinner 函数：

const findSpinner = (el) => {
    let spinner = el.closest('#ajax_spinner')
    spinner.length ? spinner : el.siblings('#ajax_spinner')
    spinner.length ? spinner : el.parentsUntil('#ajax_spinner')
    spinner.length ? spinner : el.parent('#ajax_spinner')
    spinner.length ? spinner : el.parents('#ajax_spinner')
    spinner.length ? spinner : el.find('#ajax_spinner')
    return spinner.length ? spinner : null
}

el 在这种情况下是单击的 jquery 元素。如果我这样做let spinner = el.parent().parent().siblings('#ajax_spinner')，它显然会找到用于挑选尺寸的微调器。但我不能使用它，因为并非总是如此。

【问题讨论】：

标签： jquery

【解决方案1】：

你为什么不在下面使用这个？

document.getElementById('ajax_spinner');

getElementById() 返回一个 Element 对象，表示其 id 属性与指定字符串匹配的元素。由于元素 ID 必须是独特的如果指定，它们是快速访问特定元素的有用方法。我看到 id 是 uniq 所以你可以直接用 js 选择它，或者你可以用 jQuery 选择它，如下所示

$('#ajax_spinner')

编辑抱歉，如果我错过了某些内容，但在您的 html 中没有唯一的 id，您将它们写成 class=

class='ajax_spinner'

如果你想用类来做。我为你写了一些代码，从子到父循环到 html 的顶部。通过这种方式，它找到最接近的ajax_spinnerDOM 我希望它是对的

当函数找到任何 dom 时，它将更改他的 bgcolor 并记录标记名。

        <!doctype html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
    </head>

    <body>
        <div>
            <div>
                <p></p>
            </div>

            <div>
                <p></p>
            </div>

            <div>
                <h4></h4>
                <div></div>
                <div></div>
            </div>

            <div id='wrapper'>
                <div class='ajax_spinner'></div>
                <div>
                    <h4></h4>
                    <div>
                        <button>
                        </button>
                    </div>
                </div>
                <div>
                    <h4>
                    </h4>
                    <div>
                        <button id='1659'>
                            3XL
                        </button>
                        <button id='1662'>
                            4XL
                        </button>
                        <button id='1650'>
                            L
                        </button>
                        <button id='1647'>
                            M
                        </button>
                        <button id='1644'>
                            S
                        </button>
                        <button id='1653'>
                            XL
                        </button>
                        <button id='1641'>
                            XS
                        </button>
                        <button id='1656'>
                            XXL
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <button id='add_to_cart'>
                    Add to Cart
                    <div class='ajax_spinner'></div>
                </button>
            </div>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        const findSpinner = (el) => {
            let found = null;
            while (found == null) {
                if (el.find('.ajax_spinner').length > 0) return el.find('.ajax_spinner')
                if (el.closest('.ajax_spinner').length > 0) return el.closest('.ajax_spinner')
                el = el.parent()
            }
            return found;
        }
        $('button').on('click', function (event) {
            const found = findSpinner($(this))
            if (found) {
                found.css('background', 'red')
                console.log(found.prop("tagName"));
            }
        })
    </script>

    </html>

【讨论】：

当然，我同意 ID 应该是唯一的。然而，这根本不能回答我的问题。你的回答与我要求的不同。我的问题是如何在不知道 HTML 的情况下从元素中获取最接近的 div。这种情况也可能与类或数据属性有关。我的问题不是“我如何获得#ajax_spinner”。我已将我的问题修改为类而不是 ID
我已经为您编辑并制作了一些新功能。并认为我错过了理解，因为您将 # 与类名一起使用。这就是为什么我认为你使用 id 作为 uniq :)