Question

我有一个用div构建的表。用户可以点击＆＃34; vitals表＆＃34;，它将滑下其详细信息表＆＃34;。折叠时，jQuery将详细信息表的显示属性设置为＆＃34; none＆＃34;。可见时，显示属性为＆＃34; table＆＃34;。

我需要能够识别其中一个详细信息表是否可见，并将该按钮的id保存在该vitals表中，这样，当我需要重新加载/重新填充表时，我可以看到该详细信息表重装后再次。

<div id="mainTable">
    <div class="recordRow">
        <div class="recordCell">
            <div class="vitalsTable">
                <div class="vitalsRow">
                    <div class="vitalsCell">
                        <label>some text</label>
                    </div>
                    <div class="vitalsCell">
                        <!-- button id is unique to identify the Record Row -->
                        <button id="btnViewEditRecord-4" value="Details" title="Click to View and Edit this Record">Details</button>
                    </div>
                </div>
            </div>
            <div class="detailsTable" style="display: table;">
                <div class="detailsRow">
                    <div class="detailsCell">
                        <label>some text</label>
                    </div>
                    <div class="detailsCell">
                        some text
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="recordRow">
        <div class="recordCell">
            <div class="vitalsTable">
                <div class="vitalsRow">
                    <div class="vitalsCell">
                        <label>some text</label>
                    </div>
                    <div class="vitalsCell">
                        <!-- button id is unique to identify the Record Row -->
                        <button id="btnViewEditRecord-5" value="Details" title="Click to View and Edit this Record">Details</button>
                    </div>
                </div>
            </div>
            <div class="detailsTable" style="display: none;">
                <div class="detailsRow">
                    <div class="detailsCell">
                        <label>some text</label>
                    </div>
                    <div class="detailsCell">
                        some text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试过像

这样的事情

if ($('#peopleListTable').find('.personDetailsTable').prop('display') == 'table') {

但这没有用。

我该如何做到这一点？

更新为了清楚起见，我改述了我的问题。不过，上述信息仍然具有相关性：

如何返回下一个div的display属性设置为table的按钮的id？

Answer 1

您可以使用jQuery的filter方法：

var buttonId = $('.detailsTable').filter(
  // only grab divs that have a display of table in their "style" declaration
  function () {
      return $(this).css('display') === 'table';
  })
  // look in the previous DIV for a button element, and grab it's ID
  .prev().find('button').attr('id');

<强> JSFiddle

那就是说，我会考虑重构你的html /重新思考你的方法，因为这高度依赖于你的HTML结构。正如评论中所指出的，使用类来识别元素，而不是依赖于内联样式，这将是一种更好的方法。

如何在已设置其显示属性的div集合中查找div

1 个答案: