通过传递 id 在 jQuery 中解析 XML

Question

我有 4 个 xml 块，我想用 jQuery 进行一次 ajax 调用来解析它们。现在四个xml块彼此不同（但结构相同）。我试图通过向每个 xml 块传递一个 id 来解析这个 xml，但是在我的 ajax 调用中，我无法检索 id 属性，因为它是我需要捕获以传递给 ajax 函数的第一件事。

我尝试过这样的事情：

XML 在这里：

       <dropdown>
            <test id="1">
            <optionheading>
                <heads>Heading 1</heads>
                            <value>
                                    <values images='images/1.gif'>Option1</values>
                                    <values images='images/2.gif'>Option2</values>
                                    <values images='images/3.gif'>Option3</values>
                            </value>
            </optionheading>
    .....................................

    ............................
    </test>
    <test id='2">
    <optionheading>
                <heads id="b">H..................
    ..................
    ............
    </test>
</dropdown>

我需要获取 test1、test2、et-al 的 id

Ajax 来了：

$("document").ready(function() {
                $.ajax({ 
                    type: "GET",
                    url:"dropdown.xml",
                    dataType: "xml",
                    success :function(xml) {
                        var select = $("#mySelect"); 
                        //I am getting id here
                        var id=$(xml).find('test').attr('id'); 

                        $(xml).find('test'+id).each(function() {
                            $(this).find('optionheading').each(function() {
                            var opthead = $(this).fin......................

Answer 1

如果我理解你的话，应该会发生以下情况（输出粗体）：

• <test id="IDHERE"> 应该填充 <select ID="IDHERE">
• <optionheading> 应该创建一个 <optgroup> 并带有 <heads> 中定义的 label
• 根据给定的<values> 元素，每个<optgroup> 都填充有<option> 元素

下面的代码是根据要求实现这个想法的jQuery方法。

注意：$('test', xml) 是 $(xml).find('test') 的简写。
注意2：由于ID必须是唯一的，select#yourID等于#yourID。
注意 3：此脚本不需要 XML 中的 <values> 标签。

success: function(xml){
    //Loop through each `<test>`
    $('test', xml).each(function(test_index){
        var id = $(this).attr('id'); //Get the ID of the `<test>`
        // Select <select> element with ID `ID` using the `select#ID` selector
        var select = $('select#' + id);
        $('optionheading', this).each(function() {
            $('values', this).each(function(){
                var $values = $(this);
                $('<option>')
                    .val($values.attr('images'))
                    .text($values.text())
                    .appendTo(optgroup);
            });
            $('<optgroup>')
                .attr('label', $('heads', this).text())
                .appendTo(select);
        });
    });
}

执行后可能出现的 HTML：

<select id='1'>
    <optgroup label='Heading 1'>
        <option value='images/1.gif'>Option1</option>
        <option value='images/2.gif'>Option2</option>
        <option value='images/3.gif'>Option3</option>
    <optgroup>
    ....
</select>
<select id="2">
    ...