如何在具有相同 class 的 children 元素上使用 $(this) 的点击功能？

Question

我想创建带有国家->地区->城市选择的下拉菜单。第一个 ul 通过单击该跨度打开，其他设置为在悬停时显示（代码在底部）。

<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
    <li class="dropdown-location-li">
        <strong>Deutschland</strong>
        <ul class="dropdown-location-ul" style="display:none;">
            <li class="dropdown-location-li">
                <strong>Brandenburg</strong>
                <ul class="dropdown-location-ul" style="display:none;">
                    <li class="dropdown-location-li">
                        <strong>Oranienburg</strong>
                    </li>
                    <li class="dropdown-location-li">
                        <strong>Schwedt</strong>
                    </li>
                    ...
                </ul>
            </li>
            <li class="dropdown-location-li">
                <strong>Berlin</strong>
            </li>
            ...
        </ul>
    </li>
    <li class="dropdown-location-li">
        <strong>France</strong>
    </li>
    ...
</ul>

$('.dropdown-location-li').hover(function(){
    $(this).children('ul').css('left', $(this).parent('ul').width()+'px');
    $(this).children('ul').show();
}, function(){
    $(this).children('ul').hide();
});

这很好用，现在我需要点击它以将 near 输入的值更改为强标签内的位置名称。我尝试了下面的代码，但似乎 $(this) 选择了元素及其所有 parents，但我只需要从我单击的那个中获取位置。请告诉我如何正确地做到这一点？也许我有完全错误的方法来做到这一点，需要用 id 和东西来制作所有东西，但我只是想尽量减少重复 js 的数量。

$('.dropdown-location-li').click(function(){
    $('#srch-area').val($(this).children('strong').text());
    $('#dropdown-country').hide();
});

这是它在控制台中的显示方式。如您所见，当我单击 Oranienburg 时，它也选择了 Brandenburg 和 Deutschland，它们是我单击的元素的 parents。 console screenshot

Answer 1

您嵌套了 .dropdown-location-li 个元素，因此点击会继续传播到其他 LI 元素，再次触发事件处理程序等。
你应该第一时间停止传播

$('.dropdown-location-li').click(function(e){
    e.stopPropagation();

    $('#srch-area').val($(this).children('strong').text());
    $('#dropdown-country').hide();
});

Answer 2

尝试使用JQuery Find

$(this).find('strong').text()

如何在具有相同 class 的 children 元素上使用 $(this) 的点击功能？

How to use click function with $(this) on children elements with the same class?

html

javascript

jquery

this