使用jQuery从输入控件中获取价值

Question

我使用的是teleriks treeview控件（asp.net mvc扩展），在其中最多可以有三个子节点，如下所示（drumroll……下图真棒）：

它具有自己的格式，看起来像这样：

<%= 
    Html.Telerik().TreeView()
        .Name("TreeView")
        .BindTo(Model, mappings =>
                           {
                               mappings.For<Node1>(binding => binding
                                                                     .ItemDataBound((item, Node1) =>
                                                                                        {
                                                                                            item.Text = Node1.Property1;
                                                                                            item.Value = Node1.ID.ToString();
                                                                                        })
                                                                     .Children(Node1 => Node1.AssocProperty));

                               mappings.For<Node2>(binding => binding
                                                                         .ItemDataBound((item, Node2) =>
                                                                                            {
                                                                                                item.Text = Node2.Property1;
                                                                                                item.Value = Node2.ID.ToString();
                                                                                            })
                                                                         .Children(Node2 => Node2.AssocProperty));

                               mappings.For<Node3>(binding => binding
                                                                  .ItemDataBound((item, Node3) =>
                                                                                     {
                                                                                         item.Text = Node3.Property1;
                                                                                         item.Value = Node3.ID.ToString();
                                                                                     }));
                           })
 %> 

这导致它渲染成这样。 我发现在设置值时将其呈现在隐藏的输入中是不寻常的吗？ 但无论如何：...

<li class="t-item">
<div class="t-mid">
    <span class="t-icon t-plus"></span>
    <span class="t-in">Node 1</span>
    <input class="t-input" name="itemValue" type="hidden" value="6" /></div>

        <ul class="t-group" style="display:none">
            <li class="t-item t-last">
                <div class="t-top t-bot">
                    <span class="t-icon t-plus"></span>
                    <span class="t-in">Node 1.1</span>
                    <input class="t-input" name="itemValue" type="hidden" value="207" />
                </div>

                    <ul class="t-group" style="display:none">
                        <li class="t-item">
                            <div class="t-top">
                                <span class="t-in">Node 1.1.1</span>
                                <input class="t-input" name="itemValue" type="hidden" value="1452" />
                            </div>
                        </li>

                        <li class="t-item t-last">
                            <div class="t-bot">
                                <span class="t-in">Node 1.1.2</span>
                                <input class="t-input" name="itemValue" type="hidden" value="1453" />
                            </div>
                        </li>
                    </ul>
            </li>
        </ul>

我正在做的是在用户单击某个节点后更新div。 但是，当用户单击节点时，我要发送ID而不是Node文本属性。 这意味着我必须从这些类型行中的值中获取它<input class="t-input" name="itemValue" type="hidden" value="1453" /> ，但是每次都可以不同地嵌套它，因此我现有的代码始终无法正常工作：

<script type="text/javascript">

    function TreeView_onSelect(e) {
    //`this` is the DOM element of the treeview
        var treeview = $(this).data('tTreeView');

        var nodeElement = e.item;
    var id = e.item.children[0].children[2].value;


...

</script>

因此，基于此，每次使用javascript / jquery获得适当ID的更好方法是什么？

编辑 ：

很抱歉澄清一些事情

1）是的，我处理点击到li树的S＆想找到嵌套的隐藏输入字段的值。 如您所见，从telerik代码中，设置item.Value = Node2.ID.ToString(); 使它呈现在隐藏的输入字段中。

我正在响应树中任何位置的单击，因此我无法使用依赖于设置关系的现有代码（它适用于第一个节点（节点1），不适用于下面嵌套的任何内容）

我想要的是，只要有类似这样的内容，就代表一个节点，然后单击该节点：

<li class="t-item t-last">
                            <div class="t-bot">
                                <span class="t-in">Node 1.1.2</span>
                                <input class="t-input" name="itemValue" type="hidden" value="1453" />
                            </div>
                        </li>

我希望输入中没有ID值，在这种情况下为1453 。

希望这现在更有意义。

如果可能，最好将其扩展为也将被单击的元素嵌套在变量中，即，如果单击节点1.1.2，则返回2，节点1.1返回1，节点1返回0

Answer 1

这是一个有点不清楚你在问什么，而是根据你的JavaScript代码，我猜你正在处理点击到li的树和第想要找的value的嵌套的隐藏字段的？ 如果是这样，您想要这样的事情：

function TreeView_onSelect(e) {
    var id = $(e.item).find(".t-input:first").val();
}

编辑 ：在回答您的后续问题时，您应该能够通过以下方法获得树的深度：

var depth = $(e.item).parents(".t-item").length;

Answer 2

在jQuery中，您可以使用.val（）返回任何表单元素值。

$(this).val(); // would return value of the 'this' element.

我不确定您为什么要使用相同的隐藏输入字段名称“ itemValue”，但是如果您可以更清楚地了解所要查询的内容，我相信这不太困难。

Answer 3

$('.t-input').live('change',function(){
   var ID_in_question=$(this).val();
});