Question

这是我在这里提出的第一个问题，看起来像是一个了不起的社区。

关于好东西：

我不得不从（坏）CMS输出的一组段落中包含的数据填充选择输入。我从段落中的链接拉出文本节点和属性节点，然后根据文件的年份将这些值附加到不同的<select>框。

这就是我正在做的事情：

HTML

<p class="literature-container"><a href="/url/to/file.pdf">2009-01 - Statistics</a></p>
<p class="literature-container"><a href="/url/to/file.pdf">2010-01 - Statistics</a></p>
<p class="literature-container"><a href="/url/to/file.pdf">2011-01 - Statistics</a></p>

JS

// Get Paragraph data

function getLitData(){

    var itemContent;
    var itemURL;
    var optionFormat;
    var fileYear;

    $('.literature-container').each(function() {
        itemContent = $(this).text();
        itemURL = $(this).find('a').attr("href");
        fileYear = itemContent.charAt(3);

        optionFormat = '<option ' + 'title="' + itemURL + '">' + itemContent + '</option>';

        if(fileYear == 9) {

            $("#statistics_literature_09").append(optionFormat);

        } else if(fileYear == 0) {

            $("#statistics_literature_10").append(optionFormat);

        } else if(fileYear == 1) {

            $("#statistics_literature_11").append(optionFormat);

        }

    });


};

getLitData();

这是有效的，但是你可以想象它不是非常可扩展或面向未来的，因为我必须添加更多带有正确ID的<select>标签，然后在明年编辑脚本。

我的问题是，如何让这个脚本变得更好？我想让它动态创建所需的<select>标记，并根据年份为其分配正确的ID，然后将正确的文件附加到正确的<select>。我的JS / jQuery知识在这个阶段太有限了，无法知道如何做到这一点。任何帮助将不胜感激！

提前致谢！

Answer 1

如果您提供元素并选择一个名为“Year”的属性：

<p class="literature-container" year='2011'>...
<select id="statistics_literature_09" year='2011'>

然后在您的每个功能中，您可以阅读它并找到适合此项目的选择：

var year = $(this).attr("year");
var select = $("select[year="+year+"]");
select.append(...

这是我实现它的方式，您仍然可以根据元素中的文本找到您的选择，但不是很可靠。

Answer 2

我会更改它，以便<select>元素本身也是由jQuery创建的，基于literature-container中的不同年份：

$('.literature-container').each(function() {
    itemContent = $(this).text();
    itemURL = $(this).find('a').attr("href");
    fileYear = itemContent.substr(0, 4);

    optionFormat = '<option ' + 'title="' + itemURL + '">' + itemContent + '</option>';

    // get the select, create it and append to body if it's not present
    var $sel = $("#statistics_literature_"+fileYear);
    if(!$sel.length) {
        $sel = $("<select id='statistics_literature_"+fileYear+"'><option value='selected'>Please Select a Statistics File:</option></select>").appendTo($('body'));
    }

    // add the option to the select
    $sel.append(optionFormat);
});

这样，您可以不必担心在以后添加其他年份的项目时添加更多选择。当然，选择将按照literature-container中不同年份的顺序创建，因此如果列表的顺序发生变化，选择顺序也可能......

Answer 3

$('.literature-container a').each(function() {
    var $a = $(this);

    var text = $a.text();
    var re = /^([0-9]{4}).*- (.*?[0-9]{4})$/;
    var matches = re.exec(text);
    var year = matches[1];
    var display = matches[2];

    var $select = $('#statistics_literature_'+year);
    if ($select.length == 0) {
      $select = $('<select id="#statistics_literature_'+year+'"></select>');
      $($('body')[0]).append($select);
    }

    $option = $('<option value="'+$a.attr('href')+'">'+display+'</option>');
    $select.append($option);
});

使用基于日期的jQuery动态填充SELECT输入

3 个答案: