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>";
            }