Question

我正在创建一个显示在网页上的组织的在线列表/目录。每个清单都有org's name，state，'website link'，'training calendar' link等。提供目录的信息来自我从excel文件导出的xml文件。

我有一个datastructure.js文件，该文件定义了我的资源对象并从xml加载了它。然后，我有一个不同的script.js文件，该文件在网页上生成了格式为Bootstrap 3面板的结果。所有这部分工作正常。

这是创建面板的js的样子：

// generate resource table based on selected filters
function generateResults(state) {
    var table = $('#LibraryResults');
    // first clear the table
    table.empty();
    // next generate items matching filters
        $.each(resource_list, function(i, e) {
            if (state == "" || state == e.state ) {
                // block div panel
                var iDiv = document.createElement('div');
                iDiv.id = 'column'+i;
                iDiv.className = 'panel panel-primary';
                document.getElementById('LibraryResults').appendChild(iDiv);

                // heading panel
                var innerDiv1 = document.createElement('div');
                innerDiv1.id = 'heading'+i;
                innerDiv1.className = 'panel-heading';
                iDiv.appendChild(innerDiv1); 

                // body panel
                var innerDiv2 = document.createElement('div');
                innerDiv2.id = 'body'+i;
                innerDiv2.className = 'panel-body';
                iDiv.appendChild(innerDiv2);

                // training calendar div
                var trainDiv = document.createElement('div');
                trainDiv.id = 'train'+i;
                trainDiv.className = 'col-sm-3 col-xs-6';
                innerDiv2.appendChild(trainDiv);

                //I want these items to go inside the trainDiv
                    $(trainDiv).append( 
                    "<span class='glyphicon glyphicon-calendar'></span> <a href='" + e.urltrain + "' target='_blank'>Training Calendar</a>"
                    );
                }
            });
    }

我的挑战：

组织提供的某些信息是可选的，因此我的xmls数据中可能有一个空字段（即资源对象“ urltrain”为空）。因此，'training calendar' link中的trainDiv具有空的href。

我想做的是，如果资源object (urltrain)为空，我想删除受影响的div (trainDiv)及其内容。

关于javascript，我是新手。我可以根据自己的新需求进行一些调整来复制代码，但是我对语言的了解还不足以创建新的东西。

谢谢。

Answer 1

您可以尝试以下类似方法。我添加了一个if条件，它将有条件地添加div。让我知道这是否可行，否则我可以修改解决方案以适合您的用例。

// generate resource table based on selected filters
function generateResults(state) {
    var table = $('#LibraryResults');
    // first clear the table
    table.empty();
    // next generate items matching filters
    $.each(resource_list, function(i, e) {
        if (state == "" || state == e.state ) {
            // block div panel
            var iDiv = document.createElement('div');
            iDiv.id = 'column'+i;
            iDiv.className = 'panel panel-primary';
            document.getElementById('LibraryResults').appendChild(iDiv);

            // heading panel
            var innerDiv1 = document.createElement('div');
            innerDiv1.id = 'heading'+i;
            innerDiv1.className = 'panel-heading';
            iDiv.appendChild(innerDiv1); 

            // body panel
            var innerDiv2 = document.createElement('div');
            innerDiv2.id = 'body'+i;
            innerDiv2.className = 'panel-body';
            iDiv.appendChild(innerDiv2);

            // training calendar div
            if(e.urltrain != ""){
              var trainDiv = document.createElement('div');
              trainDiv.id = 'train'+i;
              trainDiv.className = 'col-sm-3 col-xs-6';
              innerDiv2.appendChild(trainDiv);
               //I want these items to go inside the trainDiv
                $(trainDiv).append( 
                "<span class='glyphicon glyphicon-calendar'></span> <a href='" + e.urltrain + "' target='_blank'>Training Calendar</a>"
                );
            }



            }
        });
}

如果资源对象为空，如何删除div

1 个答案: