有条件的jquery地图

问题描述 投票:0回答:3

有没有办法为地图功能添加条件?

我正在尝试获取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/

jquery
3个回答
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/


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>

1
投票

您可以采取的一种方法是将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>
© www.soinside.com 2019 - 2024. All rights reserved.