如何知道标签内容有空格？答案

【问题标题】：How to know that a tag content has spaces?如何知道标签内容有空格？
【发布时间】：2016-11-14 12:05:01
【问题描述】：

在特定条件下，我在表格单元格的内容之前放置了空格：

    <c:forEach items="${menus}" var="hash_map_menu">
        <c:if test="${hash_map_menu.key == groupe_menu.gmnu_code}">
            <c:forEach items="${hash_map_menu.value}" var="menu" varStatus="iterator">
                <c:set var="bgcolor" value="#f9f9f9"/>
                <c:set var="checked" value=""/>
                <c:set var="indentation" value=""/>
                <c:forEach items="${role_menus}" var="role_menu">
                    <c:if test="${role_menu.menu_id == menu.menu_id}">
                        <c:set var="checked" value="checked"/>
                    </c:if>
                </c:forEach>
                <table class="table">
                    <tbody>
                        <c:if test="${iterator.index % 2 == 0}">
                            <c:set var="bgcolor" value="white"/>
                        </c:if>
                        <c:if test="${menu.menu_bouton == 1}">
                            <c:forEach begin="0" end="${menu.depth}">
                                <c:set var="indentation" value="${indentation}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" />
                            </c:forEach>
                        </c:if>
                        <tr style="background-color:${bgcolor};">
                            <td id="menulib_${menu.menu_id}">${indentation}${menu.menu_navigation}</td>
                            <td width="5%" align="center"><label><input type="checkbox" class="minimal" id="${menu.menu_id}" name="${menu.menu_id}" value="${menu.menu_id}" ${checked} /></label></td>
                        </tr>
                    </tbody>
                </table>
             </c:forEach>
         </c:if>
     </c:forEach>

它给出了这样的东西：

现在我想测试一个未选中的复选框是否在未添加空格的单元格的同一表格行中：

<script type="text/javascript">

    $(function() {

        $(":checkbox").on("ifUnchecked", function() { // iCheck callback
            var cellContent = $("td[id='menulib_"+$(this).attr('id')+"']").html();
            if (cellContent == $.trim(cellContent)) {
                alert("unchecked a parent checkbox");
            } else {
                alert("unchecked a child checkbox");
            }
        });

    });

</script>

在运行时，即使我取消选中与具有空格的单元格对应的行的复选框，我也会收到警报 unchecked a parent checkbox ！那么如何知道一个元素的内容有空格呢？

【问题讨论】：

使用空格的好方法 :) 使用更有意义的东西，例如数据属性或其他东西，空格 :))
我不明白！

标签： jquery html jsp jstl

【解决方案1】：

你可以这样做（代码中的 cmets）：

$('.minimal').on('change', function() { // bind change event to checkboxes
  var checkbox = $(this);
  if (!checkbox.is(':checked')) {  // run the following if the checkbox is unchecked
    var firstCell = checkbox.closest('td').prev();  // get the first sibling cell (this assumes your checkbox is always the second cell)
    
    if (firstCell.html().startsWith('&nbsp;')) { // check if the html starts with a non breaking space
      firstCell.css('color', 'red');  // do your stuff here
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr style="background-color:${bgcolor};">
      <td id="menulib_${menu.menu_id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${menu.menu_navigation}</td>
      <td width="5%" align="center">
        <label>
          <input type="checkbox" class="minimal" id="${menu.menu_id}" name="${menu.menu_id}" value="${menu.menu_id}" ${checked} />
        </label>
      </td>
    </tr>
    <tr style="background-color:${bgcolor};">
      <td id="menulib_${menu.menu_id}">${menu.menu_navigation1}</td>
      <td width="5%" align="center">
        <label>
          <input type="checkbox" class="minimal" id="${menu.menu_id1}" name="${menu.menu_id1}" value="${menu.menu_id}" ${checked} />
        </label>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：