带条件的jquery映射

Question

有没有办法向map函数添加条件？

我正在尝试获取win7和ready的工作站的计算机名称，省略了win10计算机。

有没有使用map命令获得两个工作站的好方法，或者我应该寻找不同的方法？

​

$('#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

你可以这样做：

$('#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/

Answer 2

如果您没有太多的元素，那么结合使用.filter，.map可能是一个很好的解决方案。这甚至可以完全不使用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 3

您可以采用的一种方法是将孩子的详细信息作为数据元素放在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>

​