Значения 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> 

Я думаю, мое использование из метод children в jQuery не работает при получении значений из узла?

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

---

Все, что в стороне, это действительно кажется задачей лучше всего подходит для XSLT, чем JavaScript ,

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