Jquery 使用循环生成XML输出？_Jquery_Xml_Loops

Jquery 使用循环生成XML输出？

jquery xml loops

Jquery 使用循环生成XML输出？,jquery,xml,loops,Jquery,Xml,Loops,我尝试使用select元素生成jQuery和XML的动态输出。但是当我使用if语句时，XMLeach循环只使用三明治上的第一个ID。如何使if语句根据所选ID测试每个三明治ID？每次我运行它时，它只对四个循环中的每一个使用“Italian”ID <!DOCTYPE HTML> <html> <head> <title>Sandwiches</title> <link rel="stylesheet" type="t

我尝试使用select元素生成jQuery和XML的动态输出。但是当我使用if语句时，XMLeach循环只使用三明治上的第一个ID。如何使if语句根据所选ID测试每个三明治ID？每次我运行它时，它只对四个循环中的每一个使用“Italian”ID

<!DOCTYPE HTML>
<html>
<head>
    <title>Sandwiches</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/site.css"/>
    <script language="javascript" type="text/javascript" src="jquery-2.1.0.min.js"></script>
</head>
<body>
    <header>
        <h1>Nick's Sandwich Shop</h1>
    </header>
    <section id="main">
            <section id="selection">
            <h2>Please select a sandwich</h2>
            <select id="selector">
                <option>Select One...</option>
                <option id="TheItalian">The Italian</option>
                <option id="BLTPlus1">BLT+1</option>
                <option id="TheBillyClub">The Billy Club</option>
                <option id="FrenchDip">French Dip</option>
            </select>
            </section>
            <script>
            $(document).ready(function() {
                    $("#selector").change(function() {
                        var sandwichChoice = $(this).children(":selected").attr("id");
                        $.ajax({
                            url: "sandwiches.xml",
                            dataType: "xml",
                            success: function(data){
                                var $xml = $(data);
                                var $sandwich = $xml.find("sandwich");
                                alert($sandwich.length);
                                $sandwich.each(function(){
                                    console.log($sandwich.attr("id"));
                                    console.log(sandwichChoice);
                                    if ($sandwich.attr("id" ) == sandwichChoice) {
                                        var $name = $(this).find("name");
                                        alert($name.text());
                                    };
                                });
                            }});
                        });
                    });

            </script>   
    </section>  
</body>
</html>


三明治
尼克三明治店
请选择一个三明治
选择一个。。。
意大利人
BLT+1
比利俱乐部
法国酱
$（文档）.ready（函数（）{
$（“#选择器”）.change（函数（）{
var sandwichChoice=$（this）.children（“：selected”）.attr（“id”）；
$.ajax({
url:“sandwiches.xml”，
数据类型：“xml”，
成功：功能（数据）{
var$xml=$（数据）；
var$sandwich=$xml.find（“sandwich”）；
警报（$sandwich.length）；
$sandwich.每个（函数（）{
console.log（$sandwich.attr（“id”）；
console.log（三明治选择）；
if（$sandwich.attr（“id”）==sandwichChoice）{
var$name=$（this.find（“name”）；
警报（$name.text（））；
};
});
}});
});
});

我的XML数据

<sandwiches>
    <sandwich id="TheItalian">
        <name>The Italian</name>
        <bread>Italian</bread>
        <meat>Black forest ham and salami</meat>
        <cheese>Provolone</cheese>
        <veggies>Lettuce, tomatoes, onions, and mild peppers</veggies>
        <dressing>Italian oil</dressing>
    </sandwich>
    <sandwich id="BLTPlus1">
        <name>BLT+1</name>
        <bread>Sourdough</bread>
        <meat>Bacon and more bacon</meat>
        <cheese>Cheddar</cheese>
        <veggies>Lettuce and tomatoes</veggies>
        <dressing>Spicy garlic mayo</dressing>
    </sandwich>
    <sandwich id="TheBillyClub">
        <name>The Billy Club</name>
        <bread>Rye</bread>
        <meat>Turkey, bacon and black forest ham</meat>
        <cheese>Cheddar and Swiss</cheese>
        <veggies>Lettuce, tomatoes, </veggies>
        <dressing>Honey mustard and mayo</dressing>
    </sandwich>
    <sandwich id="FrenchDip">
        <name>French Dip</name>
        <bread>Baguette</bread>
        <meat>Roast beef</meat>
        <cheese>Melted Cheddar</cheese>
        <veggies>Grilled onions</veggies>
        <dressing>Au jus</dressing>
    </sandwich>
</sandwiches>


意大利人
意大利人
黑森林火腿和腊肠
普罗沃龙
生菜、西红柿、洋葱和淡辣椒
意大利石油
BLT+1
酸面团
培根和更多培根
切达干酪
生菜和西红柿
香蒜蛋黄酱
比利俱乐部
黑麦
火鸡、培根和黑森林火腿
切达和瑞士
生菜，西红柿，
蜂蜜芥末蛋黄酱
法国酱
面包
烤牛肉
融化的切达干酪
烤洋葱
Au jus

考虑一下这个修订版的jQ，用于AJAX成功回调：

success: function(xml){
    $(xml).find("sandwich").each(function(){
        if ($(this).attr("id" ) == sandwichChoice) {
            var $name = $(this).find("name");
            alert($name.text());
        };
    });
}

我相信问题是这条线

if ($sandwich.attr("id")

…因为

$sandwich

是XML中所有三明治项目的jQ集合，而不是单个三明治

此外，如果您不反对/无法在元素上使用“值”属性，则在存在“值”属性的情况下，选择“三明治选择”会更容易：

$("#selector").change(function() {
    var sandwichChoice = $(this).val();
    ...
});

为什么是三明治？我的意思是，为什么要将$与一个变量一起使用，只要说

var sandwich=data.find（“sandwich”）谢谢！我知道我可能错过了一些愚蠢的事情。另外，感谢您对使用val（）的建议，这样做效果更好。