Question

我是一个涉及jQuery的设计师，对我来说这是一个非常陡峭的学习曲线，我知道它非常强大，但我很难避免数百万行代码而且似乎仍然难以编码我是非常肯定可以减少和软化。我想知道是否有人可以请求下面的代码示例？我是否应该将它组合成一个循环，如果是这样，有人能指出我正确的方向吗？是否需要进行硬编码并添加每个选择器？

$(xml).find('Data').each(function(){

  $('#saved').val($(this).find('saved').text());
  $('.jobrole').text($(this).find('jobrole').text());
  $('#psu1').val($(this).find('psu1').text());    
  $('#psu2').val($(this).find('psu2').text());
  $('#psu3').val($(this).find('psu3').text());
  $('#tsu1').val($(this).find('tsu1').text());
  $('#tsu2').val($(this).find('tsu2').text());
  $('#tsu3').val($(this).find('tsu3').text());
  $('#pm1').val($(this).find('pm1').text());
  $('#pm3').val($(this).find('pm3').text());
  $('#tm1').val($(this).find('tm1').text());
  $('#tm3').val($(this).find('tm3').text());
});

任何建议都会非常感激。我已经开始研究MVC框架了，这有助于/这是前进的方向吗？

最诚挚的问候拉结

Answer 1

这是基本想法：

var xmlelement = $(this);
$('[id^="psu"],[id^="tsu"],[id^="pm"],[id^="tm"]').each(function(){
   $(this).val(xmlelement.find($(this).attr('id')).text());
});

另请注意，jQuery需要小写标记，因此您需要使用：

$(xml).find('data').each(function(){

完整的代码可能是（取决于您的输入和xml）

$(xml).find('data').each(function(){
    var xmlelement = $(this);
    $('.jobrole').text($(this).find('jobrole').text());
    $('input').each(function(){
       var text = xmlelement.find($(this).attr('id')).text();
       if (text.trim()) $(this).val(text);
    });
});

Demonstration

请注意，在此代码中，我必须防止没有某些元素的数据元素。如果没有此测试（if (text.trim())），只有最后一个数据会影响您的输入。）

Answer 2

重复行的基本减少：

$(xml).find('Data').each(function(){
  var ids = ['saved', 'psu1', 'psu2', 'psu3', 'tsu1', 'tsu2', 'tsu3',
             'pm1', 'pm3', 'tm1', 'tm3'];

  $('.jobrole').text($(this).find('jobrole').text());

  for(var idx = 0; idx < ids.length; ++idx) {
      $('#'+ids[idx]).val($(this).find(ids[idx]).text());
  }
});

然后可能在其他地方构造ids数组并将其传入，因为我猜这些数据来自其他一些代码。

Answer 3

我可能会沿着这些方向做点什么：

$(xml).find('data').children().each(function(){
    var $self = $(this);
    var nodeName = this.nodeName.toLowerCase();
    var identifier = nodeName == 'jobrole' ? '.' : '#';

    $(identifier + nodeName ).val($self.text());
});

这是小提琴（来自@ dystroy的原文）：http://jsfiddle.net/lnrb0b/xeNdQ/ 你可以看到我假设小写的class / id值。我还假设你在xml中没有多少重复。

在生成的xml中留下两个<data>元素，以防你有多个。

如何进行for循环以使此代码更有效？

3 个答案: