Question

我有多个表格，可容纳整个文档中的图像。每个表都有3行（标题/图像/源）。我需要使用CSS设置标题的边框样式，但是当标题为空白时，标题类仍会出现在我的标记中，从而导致出现随机边框。

带标题的表：

<table class="img-include">
  <tr>
    <td class="caption">My Caption </td>
  </tr>
  <tr>
    <td class="image"><img src="..." /></td>
  </tr>
  <tr>
    <td class="source">My Source</td>
  </tr>
</table>

不带标题的表，但类=“ caption”仍在表单元格中：

<table class="img-include">
  <tr>
    <td class="caption"></td>
  </tr>
  <tr>
    <td class="img"><img src="..." /></td>
  </tr>
  <tr>
    <td class="source">My Source</td>
  </tr>
</table>

我想删除空白单元格的标题类，但是我当前的JS删除了所有元素的类：

//remove empty caption
if ($('.caption').is(':empty')){
  $("td").removeClass( ".caption" );
}

如何更新此内容，以便仅删除空的.caption单元格的类

JS小提琴：https://jsfiddle.net/5dq63zL4/

Answer 1

非常容易

substring(replace(replace(url,
                          'http://',
                          ''),
                  'https://',
                  ''),
          charindex('/',
                    replace(replace(url,
                                    'http://',
                                    ''),
                    'https://',
                    '')),
          len(replace(replace(url,
                              'http://',
                              ''),
                      'https://',
                      ''))
          -
          charindex('/',
                    replace(replace(url,
                                    'http://',
                                    ''),
                    'https://',
                    ''))
          +
          1)

Answer 2

您可以将CSS伪类:empty与:not一起使用，而不是使用JS删除类，以仅设置非空字幕的样式：

table {
  margin: 20px 0
}

.caption:not(:empty) {
  border-bottom: 1px solid red;
}

.source {
  font-size: .85em;
  color: #777
}

<table class="img-include">
  <tr>
    <td class="caption">My Caption </td>
  </tr>
  <tr>
    <td class="image"><img src="https://via.placeholder.com/350x150" /></td>
  </tr>
  <tr>
    <td class="source">My Source</td>
  </tr>
</table>


<table class="img-include">
  <tr>
    <td class="caption"></td>
  </tr>
  <tr>
    <td class="image"><img src="https://via.placeholder.com/350x150" /></td>
  </tr>
  <tr>
    <td class="source">My Source</td>
  </tr>
</table>


<table class="img-include">
  <tr>
    <td class="caption">My Caption </td>
  </tr>
  <tr>
    <td class="image"><img src="https://via.placeholder.com/350x150" /></td>
  </tr>
  <tr>
    <td class="source">My Source</td>
  </tr>
</table>

如果元素在JS中为空，则删除CSS类

2 个答案: