javascript - 了解在处理子元素(而不是属性)时如何使用 prop()

Question

我在网上得到了这个片段，它基本上是一个 jQuery 函数，它接受索引值，然后在页面加载时将该特定的 option 值加载到输入字段中。看一下片段:

HTML::

<input type="text" id="city" name="city" list="clist" placeholder="Select City">
<datalist id="clist" name="clist">
    <option value="10th mile">15094</option>
    <option value="A.s.peta">2958</option>
    <option value="Faizpur">7313</option>
    <option value="Gabbar">7480</option>
    <option value="Gadag">7227</option>
    <option value="Hadpid">6474</option>
</datalist>

jQuery

$.fn.datalistOptionSet = function (index) {
    return this.each(function () {
        var input = $(this)
        var list = $("#" + input.attr("list"))
        var options = $($(list).prop("options"))
        input.val(options.eq(index).val())
    })
}
$("#city").datalistOptionSet(0);

<强> FIDDLE HERE

我的问题是关于以下代码行:

var options = $($(list).prop("options"));

我理解 prop() 的工作原理，但实际上在这个例子中 option 是 datalist 的属性，它是一个子元素，不是属性(property)权吗？另外为什么用复数 .prop("options") 、 options 而不是 option ？复数让我感到困惑，因为我没有看到任何标签名称为 options 的 HTML 元素。

谁能回答一下我的这两个问题。

Answer 1

而不是使用

var options = $($(list).prop("options"))

你可以这样做:

var options = $(list).children();

看起来更容易阅读。

至于属性的问题……不要忘记dom是一个对象，元素也是对象。您想知道 options 作为列表的属性与具有与其中的控件相关的属性的表单元素没有任何不同