Javascript jQuery DOM对象和按引用传递

首先，让我在回答这个问题之前说，我对Javascript相当陌生

我还了解Javascript对象是通过引用传递的，而原语是通过值[]传递的

也就是说，我的问题是（简化的例子）：我正在引入包含许多不同信息的JSON数据，我需要将每种不同类型的信息放入另一个

中，就像这样：

<ul class="car-tree">
  <li>
    <label>Sports Cars</label>
    <ul class="sport-cars">
      <li>Porsche</li>
      <li>Mercedes</li>
      <li>BMW</li>
    </ul>
  </li>
  <li>
    <label>Super Cars</label>
    <ul class="super-cars">
      <li>Ferrari</li>
      <li>Lamborghini</li>
    </ul>
  </li>
  <li>
    <!-- and so on... -->
  </li>
</ul>

var CarView = function(){

  var buildCarTree = function(){

    // Gets the JSON data from somewhere
    var jsonData = grabJsonData();

    // Grab the template and convert it into a jQuery object
    var template = $(grabCarTreeTemplate());

    // Adds sport car data to sports cars list
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars);

    // Adds super car data to sports cars list
    this.addCars(template.find('.super-cars'), jsonData.superCars);

    // Add the car tree to some container
    $('#container-trees').append(template);
  }

  var addCars = function(container, carData){

    for(id in carData){
      $('<li/>', {
        text : carData[id].text
      }).appendTo(container);
    }
  }
};

var view = new CarView();
view.buildCarTree();



跑车

保时捷
梅赛德斯
宝马



超级汽车

法拉利
兰博基尼






我正在为上面的列表获取一个模板，该模板包含除最内部的
标记以外的所有内容，并尝试按如下方式填充它：

<ul class="car-tree">
  <li>
    <label>Sports Cars</label>
    <ul class="sport-cars">
      <li>Porsche</li>
      <li>Mercedes</li>
      <li>BMW</li>
    </ul>
  </li>
  <li>
    <label>Super Cars</label>
    <ul class="super-cars">
      <li>Ferrari</li>
      <li>Lamborghini</li>
    </ul>
  </li>
  <li>
    <!-- and so on... -->
  </li>
</ul>

var CarView = function(){

  var buildCarTree = function(){

    // Gets the JSON data from somewhere
    var jsonData = grabJsonData();

    // Grab the template and convert it into a jQuery object
    var template = $(grabCarTreeTemplate());

    // Adds sport car data to sports cars list
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars);

    // Adds super car data to sports cars list
    this.addCars(template.find('.super-cars'), jsonData.superCars);

    // Add the car tree to some container
    $('#container-trees').append(template);
  }

  var addCars = function(container, carData){

    for(id in carData){
      $('<li/>', {
        text : carData[id].text
      }).appendTo(container);
    }
  }
};

var view = new CarView();
view.buildCarTree();

var CarView=function（）{
var buildCarTree=函数（）{
//从某处获取JSON数据
var jsonData=grabJsonData（）；
//获取模板并将其转换为jQuery对象
变量模板=$（grabCarTreeTemplate（））；
//将跑车数据添加到跑车列表中
this.addCars（template.find（'.sports cars'）、jsonData.sportsCars）；
//将超级汽车数据添加到跑车列表中
this.addCars（template.find（'.super-cars'）、jsonData.superCars）；
//将汽车树添加到某个容器中
$（“#容器树”）.append（模板）；
}
var addCars=函数（容器、卡数据）{
用于（卡数据中的id）{
$（“
”{
text:carData[id]。text
}).附在（容器）上；
}
}
};
var view=新的CarView（）；
view.buildCarTree（）；

执行此操作时，您将获得没有添加数据的模板，但是，如果通过out
addCars
添加
console.log
语句，您可以看到数据添加到
container
参数中

我很困惑，因为从我从上面提供的资料中了解到：

…如果更改参数本身…则不会影响项目
这被输入到参数中。但是如果你改变了
参数，它将传播回

我认为
appendTo
将改变jQuery对象的内部结构。这是怎么回事？
看起来您试图调用私有var函数，就好像它们是obj的方法一样。更改此选项，然后尝试：

var CarView = function(){

  this.buildCarTree = function(){

    // Gets the JSON data from somewhere
    var jsonData = grabJsonData();

    // Grab the template and convert it into a jQuery object
    var template = $(grabCarTreeTemplate());

    // Adds sport car data to sports cars list
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars);

    // Adds super car data to sports cars list
    this.addCars(template.find('.super-cars'), jsonData.superCars);

    // Add the car tree to some container
    $('#container-trees').append(template);
  }

  this.addCars = function(container, carData){

    for(id in carData){
      $('<li/>', {
        text : carData[id].text
      }).appendTo(container);
    }
  }
};

var view = new CarView();
view.buildCarTree();

var CarView=function（）{
this.buildCarTree=函数（）{
//从某处获取JSON数据
var jsonData=grabJsonData（）；
//获取模板并将其转换为jQuery对象
变量模板=$（grabCarTreeTemplate（））；
//将跑车数据添加到跑车列表中
this.addCars（template.find（'.sports cars'）、jsonData.sportsCars）；
//将超级汽车数据添加到跑车列表中
this.addCars（template.find（'.super-cars'）、jsonData.superCars）；
//将汽车树添加到某个容器中
$（“#容器树”）.append（模板）；
}
this.addCars=函数（容器，carData）{
用于（卡数据中的id）{
$（“
”{
text:carData[id]。text
}).附在（容器）上；
}
}
};
var view=新的CarView（）；
view.buildCarTree（）；

编辑：查看此jsFiddle以了解工作代码：
是否正在
grabJsonData
发出ajax请求？如果是这样，那么您就有异步问题。发布
grabJsonData
的内容，我将向您展示如何修复。不，这不是问题所在。JSON部分并不重要，因为我可以在addCars中看到列表被正确修改，但是当我离开该函数时，列表并没有反映这些修改。你是正确的！现在我觉得忽略了那个…我真的错过了结对编程！