Get text of parent dt in Description List

Question

I have a JQuery Mobile popup (an unordered list) embedded in a description list:

<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>

I want the function selectCategory() to get the text of the parent dt (in this case "Group One"). I've tried both of the following with no success:

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

Any suggestions?

Answer 1

The problem is that when jQM initializes the popup, it moves it from the current DOM position into a popup container at the top level. So the DD is no longer its ancestor.

One thing you could do is add a click handler to the button that launches the popup and get the text there. Then you could put the text in a global variable or a data-attribute within the popup.

Given this markup:

<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>

Your script would be along the lines of

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

If you prefer the data-attribute route:

$("#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