Question

是否可以向地图函数添加条件？

我正在尝试获取准备就绪的win7工作站的计算机名称，而忽略了win10机器。

是否有使用map命令获得2个工作站的好方法？还是我应该寻找其他方法？

$('#get').click(function() {
  var grids = $('.highlight').map(function() {
    return this.id;
  }).get().join();
  console.log(grids);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <th>Workstation</th>
  <th>Version</th>
  <th>Status</th>
  <tr>
    <td id="mac1" class='highlight'>mac1</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac2</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr>
    <td id="mac3" class='highlight'>mac3</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac4</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac5</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr>
    <td id='mac6' class='highlight'>mac6</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
</table>

<div class='button' id='get'>Get</div>

https://jsfiddle.net/mLf5az63/3/

Answer 1

如果您没有太多元素，将

.map与.filter结合使用可能是一个很好的解决方案。甚至完全不使用jQuery也是可能的。

document.getElementById('get').addEventListener('click', () => {
  const grids = Array.from(document.querySelectorAll('tr'))
    .map(line => {
      // Get the first cell with the id or undefined if not available
      const id = (line.querySelector('td:nth-child(1)') || {}).id;
      // Get the second cells content
      const version = (line.querySelector('td:nth-child(2)') || {}).innerText;
      // And lastly the status
      const status = (line.querySelector('.status') || {}).innerText;

      // Check version and status and return the id
      if (version === 'win7' && status === 'ready') {
        return id;
      }

      // Otherwise something falsy
      return null;
    })
    // Only return item when it is tru'ish
    .filter(item => item);
  console.log(grids);
});

<table>
  <th>Workstation</th>
  <th>Version</th>
  <th>Status</th>
  <tr>
    <td id="mac1" class='highlight'>mac1</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac2</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr>
    <td id="mac3" class='highlight'>mac3</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac4</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr>
    <td>mac5</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr>
    <td id='mac6' class='highlight'>mac6</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
</table>

<button id='get'>Get</button>

Answer 2

您可以采取的一种方法是将子项详细信息作为数据元素放在tr上。然后，在找到突出显示的元素之后，您可以找到它们的父行，对所需的行进行过滤，然后执行地图。

$('#get').on('click', function() {
  var grids = $('.highlight')
    .closest('tr')
    .filter(function(){
      return this.dataset.os === 'win7' && this.dataset.status === 'ready'
    })
    .map(function() {
      return this.dataset.id;
    }).get().join();
    
  console.log(grids);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <th>Workstation</th>
  <th>Version</th>
  <th>Status</th>
  <tr data-id="mac1" data-os="win7" data-status="ready">
    <td id="mac1" class='highlight'>mac1</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
  <tr data-id="mac2" data-os="win7" data-status="not ready">
    <td>mac2</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr data-id="mac3" data-os="win10" data-status="ready">
    <td id="mac3" class='highlight'>mac3</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr data-id="mac4" data-os="win10" data-status="ready">
    <td>mac4</td>
    <td>win10</td>
    <td class='status'>ready</td>
  </tr>
  <tr data-id="mac5" data-os="win7" data-status="not ready">
    <td>mac5</td>
    <td>win7</td>
    <td class='status'>not ready</td>
  </tr>
  <tr data-id="mac6" data-os="win7" data-status="ready">
    <td id='mac6' class='highlight'>mac6</td>
    <td>win7</td>
    <td class='status'>ready</td>
  </tr>
</table>

<div class='button' id='get'>Get</div>

Answer 3

您可以这样做：

$('#get').click(function () {
  var grids = $('.highlight').map(function () {
        var type = $(this).next('td')[0].innerText;
        var status = $(this).next('td').next('td')[0].innerText;
        if(type == 'win7' && status == 'ready') {
            return this.id;
        }
   }).get().join();
   console.log(grids);
});

我也更新了您的JS小提琴，您可以在那里进行测试。

https://jsfiddle.net/yov7ugjx/2/

带条件的jQuery映射

3 个答案: