防止显示对象中没有任何内容的 li 元素

问题描述

我有一个侧边栏，其中包含使用 JS 生成的 li 元素，但我想避免显示其中包含一些空元素的 li 元素。

到目前为止，我成功地从侧边栏中隐藏了爱尔兰的国家/地区名称和链接名称，但我不知道如何消除包含空名称的 li。

我的对象数组包含 2 个国家/地区，但由于爱尔兰不包含元素，因此我希望删除与爱尔兰对应的 li。

li 生成的 HTML 如下所示：

<li class="agency">
 <a href="#" class="agency-link" id="IE">
  <img src="https://via.placeholder.com/150" alt="Ireland">
    <div class="agency-content">
     <h4 class="country-name"></h4>
     <span class="agencies-names"></span>
    </div>
 </a>
</li>

我为隐藏爱尔兰的国家名称和链接名称而编写的条件是：

          if ((group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]) != "") {
              agencyN.textContent = group.data[i][`linkName${codeLang}`];
              countryN.textContent = group.data[i][`country${codeLang}`]; 
          } else {
            // remove the li that doesn't have displayed the country name or the link name
          }

谁能解释一下？谢谢！

am4core.ready(function () {
  am4core.useTheme(am4themes_animated);

  let chart = am4core.create("map",am4maps.MapChart);

  chart.responsive.enabled = true;

  chart.geodata = am4geodata_worldHigh;

  chart.projection = new am4maps.projections.Miller();

  chart.zoomControl = new am4maps.ZoomControl();

  let homeButton = new am4core.Button();
  homeButton.events.on("hit",function () {
    chart.goHome();
  });

  homeButton.icon = new am4core.Sprite();
  homeButton.padding(7,5,7,5);
  homeButton.width = 30;
  homeButton.icon.path = "M16,8 L14,16 L10,10 L6,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
  homeButton.marginBottom = 10;
  homeButton.parent = chart.zoomControl;
  homeButton.insertBefore(chart.zoomControl.plusButton);

  chart.homeZoomLevel = 3.3;
  chart.homeGeoPoint = { longitude: 14.5,latitude: 54 };

  let colorSet = "#000";
  let groupData = [
    {
      "data": [
        {
          "countryEN": "Austria","id": "AT","linkEN": ["http://www.example.com"],"linkNameEN": ["Link Name 1"],"capital": "Vienna","latitude": 48.2082,"longitude": 16.3738,"color": colorSet,"img": "https://via.placeholder.com/150"
        },{
          "countryEN": "Ireland","id": "IE","linkEN": [""],"linkNameEN": [""],"capital": "dublin","latitude": 53.3498,"longitude": -6.2603,"img": "https://via.placeholder.com/150"
        }
      ]
    }
  ];

  let excludedCountries = ["AQ"];

  const findUrl = "http://www.example.com/en/"; 
  
  const regex = /\.com\/(\w{2})\//;
  const match = regex.exec(findUrl);

  const result = match && match[1];

  let codeLang = result.toupperCase();

  groupData.forEach(function (group) {
    let series = chart.series.push(new am4maps.MappolygonSeries());
    series.name = group.name;
    series.useGeodata = true;

    let includedCountries = [];

    series.include = includedCountries;

    series.fill = am4core.color(group.color);
    series.setStateOnChildren = true;
    series.calculateVisualCenter = true;
    series.tooltip.label.interactionsEnabled = false; 
    series.tooltip.keepTargetHover = true;

    series.tooltip.getFillFromObject = false;
    series.tooltip.background.fill = am4core.color("#fff");
    series.tooltip.background.stroke = am4core.color("#003399");
    series.tooltip.background.strokeWidth = 1;

    group.data.forEach(function (country) {
      includedCountries.push(country.id);
      excludedCountries.push(country.id);
    });
    
    let polygonTemplate = series.mappolygons.template;
    polygonTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer; 

    // Generating list of countries,agencies and flags on sidebar
    let ul = document.getElementById('map-list');
    
    for (let i = 0; i < group.data.length; i++) {
      let li = document.createElement('li');
      li.setAttribute('class','agency');
      
      ul.appendChild(li);
      
      let a = document.createElement('a');
      a.href = '#';
      a.setAttribute('class','agency-link');
      a.setAttribute('id',group.data[i].id);
      li.appendChild(a);
      
      
      let img = document.createElement('img');
      img.src = group.data[i].img;
      img.alt = group.data[i][`country${codeLang}`];

      a.appendChild(img);
      
      let div = document.createElement('div');
      div.setAttribute('class','agency-content');
      a.appendChild(div);

      let titleInDiv = document.createElement('h4');
      titleInDiv.setAttribute('class','country-name');
      div.appendChild(titleInDiv);
      
      let span = document.createElement('span');
      span.setAttribute('class','agencies-names');
      div.appendChild(span);
      
      let countryNames = document.getElementsByClassName("country-name");
      let agenciesNames = document.getElementsByClassName("agencies-names");
      let agencyN = agenciesNames[i];
      let countryN = countryNames[i];

      // Agencies and Countries Name on sidebar          
      if (group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]!= "") {
        agencyN.textContent = group.data[i][`linkName${codeLang}`];
        countryN.textContent = group.data[i][`country${codeLang}`]; 
      } else {
        // remove the li that doesn't display the Country Name or the Link Name
        
      }
    }
    
    let mappolygonTemplate = series.mappolygons.template;
    mappolygonTemplate.fill = am4core.color("dodgerblue");
    mappolygonTemplate.fillOpacity = 0.8;
    mappolygonTemplate.nonScalingstroke = true;
    mappolygonTemplate.tooltipPosition = "fixed";
    
    mappolygonTemplate.events.on("over",function (event) {
      series.mappolygons.each(function (mappolygon) {
        mappolygon.isHover = false;
      });
      event.target.isHover = false;
      event.target.isHover = true;
    });
    
    mappolygonTemplate.events.on("out",function (event) {
      series.mappolygons.each(function (mappolygon) {
        mappolygon.isHover = false;
      });
    });
    
    let hoverState = mappolygonTemplate.states.create("hover");
    hoverState.properties.fill = am4core.color("#FFCC00");
    
    series.data = JSON.parse(JSON.stringify(group.data));
  });

  let worldSeries = chart.series.push(new am4maps.MappolygonSeries());
  let worldSeriesName = "world";
  worldSeries.name = worldSeriesName;
  worldSeries.useGeodata = true;
  worldSeries.exclude = excludedCountries;
  worldSeries.fillOpacity = 0.5;
  worldSeries.hiddenInLegend = true;
  worldSeries.mappolygons.template.nonScalingstroke = true;

  
});

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

h3.countryName,h3.countryNameTtp {
  font-size: 1rem;
  color: #003399;
}

a.countryLinks {
  line-height: 1.5rem;
}

#map {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

#map a,b {
  cursor: pointer;
  color: #003399;
  text-align: center;
  font-family: "Open Sans",sans-serif;
}

#map a:hover {
  color: #023432;
}


#map-list {
  padding: 0;
  list-style: none;
}
#map-list ul {
  border-color: #eee;
  padding: 0;
  margin: 0;
}
.agency a {
  text-decoration: none;
  border-bottom: 1px solid #f3f3f3;
}
.agency a:hover {
  background-color: #f3f3f3;
}
.agency-link {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.agency-link img {
  object-fit: contain;
  width: 50px;
  height: 50px;
}

.agency-content {
  font-size: 0.8rem;
  color: gray;
  padding: 0.5rem  0 0.5rem 0.5rem;
  word-break: break-word;
}
.agencies-names {
  font-size: 1rem;
}
.agency-content h4 {
  color: #000000;
  font-size: 1rem;
}
.map-list li {
  border: 1px solid #cccccc;
  border-bottom: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.map-list li:last-of-type {
  border: 1px solid #cccccc;
}
.map-sidebar {
  height: 600px;
  overflow-y: scroll;
  position: relative;
}

@media screen and (max-width: 768px) {
  .map-sidebar {
    height: 150px;
    overflow-y: scroll;
  }
  .map-search-form {
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="js/custom.js"></script>
<div class="container">
  <div class="row">
      <div class="map-sidebar col-lg-3 col-md-12 col-sm-12 px-0">
          <ul id="map-list"></ul>
      </div>
      <div class="col-lg-9 col-md-12 col-sm-12 px-0">
          <div id="map"></div>
      </div>
  </div>
</div>

解决方法

您需要“跳过”将 li 附加到您的 ul。

在您的 for 循环中，您将有一个 if 语句来检查您的数据是否不为空，如下所示：

if(group.data[i] != "") {
   ul.appendChild(li);
   //run the rest of the logic you wish to run on non empty data
}