Question

我在说明列表中嵌入了一个JQuery Mobile弹出窗口（无序列表）：

<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" );
}

工作 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" );
}

数据属性 DEMO

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

1 个答案: