jQuery 触发单击具有特定属性的第一个元素

Question

我正在搜索我的下拉菜单，但遇到了一些问题。 当您通过在键盘上键入来搜索我的下拉列表时，您搜索的元素会更改背景颜色。 现在我想要的是在您搜索并在找到您想要的国家后按 Enter 时触发点击事件（如果有多个国家，则输入应选择第一个）。 我正在使用背景颜色来查找enter键所需的元素。 这是我实现这一目标的尝试：

function enterTest() {

    $('.dropdown').on('show.bs.dropdown', function() {
        $(document.body).on('keypress', addClick);
    })

    $('.dropdown').on('hide.bs.dropdown', function() {
        $(document.body).off('keypress', addClick);
    })

    function addClick (e) {
        var key = e.which;
        var $background = $('.dropdown-menu ul li a').css('background-color');

        if (key == 13 ) {
            if ($background == 'rgba(255, 171, 0, 0.15)') {
                $('.dropdown-menu ul li a:eq(0)').click();
            }
        }
    }
}

$('.dropdown-menu ul li a:eq(0)').click(); 当我使用这部分时，它总是从所有a元素中选择第a元素，但我需要的是用rgba(255, 171, 0, 0.15)选择第一个元素。 我曾尝试像这样使用 eq()： $(this).eq(0).click()但这也不起作用。 我也试过做这样的事情：

    if (key == 13 ) {
        $background.each(function (i) {
            if ($background == 'rgba(255, 171, 0, 0.15)') {
                $(this).click();
                return;
            }
        })
    }

但这也不起作用。
有没有办法触发具有特定颜色的第一个元素的点击事件？ 谁能帮我解决这个问题？ 这是带有我的搜索示例的代码笔，没有上面的功能https://codepen.io/Karadjordje/pen/MEBjRY

Answer 1

$('.dropdown-menu ul li a').filter(function(){
    $bg = $(this).css('background-color');
    if ($bg === 'rgba(255, 171, 0, 0.15)') {
        return true;
    }
}).eq(0).click();

.filter部分将您的结果过滤为您返回 true 的任何内容，在这种情况下是背景颜色。 .eq(0)得到那些过滤后的结果，只返回第一个，显然.click()点击它。