jQuery children() 值？

Question

我正在尝试让我的 JavaScript 在网页上生成一个选定的 HTML 输入元素。这样做的问题是它没有从该节点获取子节点的值，并且在生成我的选择框时导致ObjectUnknownHTMLElement。

XML

<Salutation restricted="no" type="dropdownBox" tooltip="Select a title for the customer" required="yes" size="6">
    <value>Mr</value>
    <value>Sir</value>
    <value>Mrs</value>
    <value>Miss</value>
    <value>Lord</value>
</Salutation>

jQuery 代码

//hack to pretend its html by wrapping divs to make jquery find work on IE7
selection = $("<div>" + xml + "</div>").find("Salutation").children();
//generate a select box
var selectBox = "<select id=\"Salutation\"> ";
for ( var j = 0; j < selection.length; j++)
{
    selectBox += "<option value=\"" + selection[j].v + "\">" + selection[j]
        + "</option>";
}

输出 HTML

<select id="salutation">
    <option value="undefined">[object HTMLUnknownElement]</option>
    <option value="undefined">[object HTMLUnknownElement]</option>
    <option value="undefined">[object HTMLUnknownElement]</option>
    <option value="undefined">[object HTMLUnknownElement]</option>
    <option value="undefined">[object HTMLUnknownElement]</option>
</select>

我猜我在 jQuery 中使用 children 方法无法从节点获取值？

Answer 1

不要尝试将 XML 包装在 <div> 中。只需 jQuery 即可：

selection = $(xml).find("Salutation").children();

那么，既然<Salutation>是XML的根节点，就不要尝试.find()吧：

selection = $(xml).children();

现在您必须使用actual jQuery API methods 从每个 XML 元素中获取文本：

$selection = $(xml).children();
var selectBox = '<select id="Salutation">';
$selection.each(function () {
    var value = $(this).text();
    selectBox += '<option value="' + value + '">' + value + '</option>'
});
selectBox += '</select>'

我不知道是什么让您认为这些元素具有 v 属性，因此 selection[j].v 将永远有效。

还有更好的方法来构建元素树：

var $selection = $(xml).children();
var $selectBox = $('<select/>', {id: 'Salutation'});
$selectBox.append(
    $selection.map(function() {
        return $('<option/>', { text: $(this).text() });
    }).get()
);

http://jsfiddle.net/mattball/RbEs9

---

除此之外，这个真的似乎比 JavaScript 更适合 XSLT。

Answer 2

尝试访问您选择的 innerHTML：http://jsfiddle.net/Kmp7v/

var selectBox = "<select id=\"Salutation\"> ";
            for ( var j = 0; j < selection.length; j++)
            {
                selectBox += "<option value=\"" + selection[j].innerHTML + "\">" + selection[j].innerHTML
                        + "</option>";
            }