Question

我有以下代码...我通过在options标记中不包含select来简化它：

    <div>
        Show all tasks where assigned to <span><strong></strong>
           <select></select></span>
        and project is <span><strong></strong>
            <select></select></span>
        and status is <span><strong></strong>
            <select></select></span>
        and category is <span><strong></strong>
            <select></select></span>
    </div>

当页面加载时，我想执行以下操作：

在select标记之间的每个strong输入中显示所选项目的文字。
隐藏select标记。

当用户点击strong时，我希望隐藏strong代码并显示select。

话虽如此，如果我为每个人分配特定的id值，因为缺少一个更好的术语，我可以使用它。我想简化我的jquery所以我可以避免额外的HTML。

希望这有点意义......这就是我和我的jquery ...

$(function () {
    $("#filter select").hide();

    $("#filter strong").each(function () {
        $(this).html($(this).siblings("select:first option:selected").text())); // not working
    });

    $("#filter strong").each(function () {
         $(this).bind("click", function () {
             $(this).css("display", "none"); // not sure if this will work, need to get the first part working
             $(this).siblings("select:first").css("display", "");
         });
    });
});

我将继续努力，但感谢您提供的任何帮助！我认为我的挑战在于sibling选择器如何在jQuery中工作。

更新

感谢@alex和@Andy ......这是最终的工作解决方案：

$(function () {
    $("#filter select").hide();

    $("#filter strong").html(function () {
        return $(this).next().find(":selected").text(); 
    })

    $("#filter strong").each(function () {
        $(this).bind("click", function () {
            $(this).css("display", "none");
            $(this).siblings("select:first").css("display", "");
        });
    });
});

Answer 1

我认为我的困难在于兄弟选择器如何在jQuery中工作。

siblings()方法将选择与当前元素相邻的所有元素。它基本上与......相同。

var element = $('#something'),

    siblings = element.parent().children().not(element);

您也可能尝试将选择器字符串传递给siblings()来选择太多。

尝试使用...

.siblings("select:first").find("option:selected")

Answer 2

你可以使用：

$('strong').click(function(){ $(this).hide().next().show(); });

这里你有一个太多的括号 - ＆gt;的.text（））;

 $("#filter strong").each(function () {
     $(this).html($(this).siblings("select:first option:selected").text())); // not working
 });

尝试使用jQuery在嵌套对象上设置属性/属性

更新

2 个答案: