获取描述列表中父 dt 的文本

Question

我在描述列表中嵌入了一个 JQuery 移动弹出窗口（无序列表）：

<dl data-role="listview" data-inset="true" data-theme="d" id="sortable">
<dt class="ui-bar ui-bar-b ui-corner-all">Group One</dt>
<dd class="ui-bar ui-bar-a ui-corner-all ui-btn-icon-left ui-icon-bars">
    <div class="divMain">
        <div class="divQuestion">
            <textarea name="strQuestion-q1" id="strQuestion-q1" placeholder="Enter Question Number 1" style="margin:0px;"></textarea>
        </div>
        <div class="divCategory">
            <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
            <div id="popupMenu-q1" data-role="popup" data-theme="b">
                <ul style="min-width: 210px;" data-role="listview" data-inset="true">
                    <li data-role="list-divider">Choose the scoring category</li>
                    <li><a name="strCategory-o1-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 1</a></li>
                    <li><a name="strCategory-o2-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 2</a></li>
                    <li><a name="strCategory-o3-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</dd>
</dl>

我希望函数 selectCategory() 获取父 dt 的文本（在本例中为 "Group One"）。我试过以下两种方法都没有成功：

$('#strCategory-o1-q1').parent().prev('dt').text();
$('#strCategory-o1-q1').closest('dd').prev('dt').text();

有什么建议吗？

Answer 1

问题在于，当 jQM 初始化弹出窗口时，它会将其从当前 DOM 位置移动到顶层的弹出容器中。所以DD已经不是它的祖先了

您可以做的一件事是向启动弹出窗口的按钮添加点击处理程序，并在其中获取文本。然后您可以将文本放入全局变量或弹出窗口中的数据属性中。

鉴于此标记：

<a id="btnPopup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>

<div id="popupMenu-q1" data-role="popup" data-theme="b">
    <ul style="min-width: 210px;" data-role="listview" data-inset="true">
        <li data-role="list-divider">Choose the scoring category</li>
        <li><a name="strCategory-o1-q1"  href="#">Category 1</a></li>
        <li><a name="strCategory-o2-q1" href="#">Category 2</a></li>
        <li><a name="strCategory-o3-q1" href="#">Category 3</a></li>
    </ul>
</div>

你的脚本应该是

var curDDText;

$("#btnPopup").on("click", function(){
    curDDText = $(this).closest('dd').prev('dt').text();
});

$("#popupMenu-q1 ul li a").on("click", function(e){
    selectCategory(this);
});

function selectCategory(elem){
    alert($(elem).prop("name") + "  -  " + curDDText);
    $("#popupMenu-q1").popup( "close" );
}

working DEMO

如果您更喜欢数据属性路由：

$("#btnPopup").on("click", function(){
    var curDDText = $(this).closest('dd').prev('dt').text();
    $("#popupMenu-q1 ul").jqmData("dttext", curDDText);
});

function selectCategory(elem){
    var curDDText = $(elem).closest("ul").jqmData("dttext");
    alert($(elem).prop("name") + "  -  " + curDDText);
    $("#popupMenu-q1").popup( "close" );
}

data-attribute DEMO

获取描述列表中父 dt 的文本

Get text of parent dt in Description List

jquery-mobile

parent