Question

在UL中选择和收集每个LI的文本时遇到问题。请查看我到目前为止的示例http://jsfiddle.net/Twisty/YYbfY/

HTML

<div data-role="navbar" data-mini="true">
    <ul id="resultHeader">
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column A</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column B</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column C</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
</div>

<textarea id="clipText-cell"></textarea>
<textarea id="clipText-row"></textarea>
<textarea id="clipText-all"></textarea>

<div id="copyPopup" data-role="popup" data-positionTo="origin">
    <div data-role="controlgroup" data-mini="true">
        <a href="" data-role="button" id="copyCell-btn">Copy '<span id="copyCellBtn-text"></span>'</a>
        <a href="" data-role="button" id="copyRow-btn">Copy Row</a>
        <a href="" data-role="button" id=copyAll-btn>Copy All Rows</a>
    </div>
</div>

JQUERY

var tapTimer, isTapHold = false;
$(".resultRow li").bind("vmousedown vmouseup", function(e) {
    var clickedLi = $(this).parent().parent("li");
    var clickedUl = clickedLi.parent("ul");
    var cellText = $(this).text();
    var rowText = "";
    var tableText = "";    
    var rows = [];
    var table = [];

    if (e.type == "vmousedown") {
        tapTimer = setTimeout(function() {
            isTapHold = true;
            //alert("Click-Hold for 1.5 seconds.");
            $("#copyCellBtn-text").html(cellText);
            $("#clipText-cell").val(cellText);
            $("#clipText-row").val(rowText);
            $("#clipText-all").val(tableText);            
            $("#copyPopup").popup("open", {
                x: (e.pageX + 100),
                y: (e.pageY + 60)
            });
        }, 1500);
    } else {
        // e.type = 'vmouseup'
        // Clear the timeout if not already reached
        clearTimeout(tapTimer);

        // if flag is set to false, regular tap or click
        if (!isTapHold) {
            // Not Click-Hold, do nothing
        }

        // Reset flag
        isTapHold = false;
    }
});

我想要发生的是当用户点击或点按时，会出现一个弹出菜单，他们可以选择复制点击的文本，整行的文本或整个文本表

要收集行数据，我正在尝试找出如何迭代点击的li中的每个ul，并收集相应textarea中的所有文字。一旦我能够得到这个，我就可以创建一个循环来对所有ul执行相同的操作，以便稍后收集所有文本。

Answer 1

您可以使用以下代码段

var rowtext = "" ;
    var rowText = $.each(clickedLi.parent("ul").children("li"),function(){
        rowtext += $(this).find("span.ui-btn-inner").html(); });

检查小提琴

http://jsfiddle.net/YYbfY/26/

由于

Answer 2

Twisty，我想我已经设法穿透了桌子/行。

您可能会考虑按以下方式组织代码：

$(function() {
    var $$ = {};//cache of static jQuery objects
    $$.copyCellBtn_text = $("#copyCellBtn-text");
    $$.clipText_cell = $("#clipText-cell");
    $$.clipText_row = $("#clipText-row");
    $$.clipText_all = $("#clipText-all");
    $$.copyPopup = $("#copyPopup");

    var tapTimer, 
        isTapHold = false, 
        tapHoldDelay = 1500,
        textJoinStr = ', ',//adjust as required
        textObj = { //fully populated later
            cell: '',
            row: '',
            table: ''
        };

    function makeTapTimer(e) {
        return setTimeout(function() {
            isTapHold = true;
            //alert("Click-Hold for 1.5 seconds.");
            $$.copyCellBtn_text.html(textObj.cell);
            $$.clipText_cell.val(textObj.cell);
            $$.clipText_row.val(textObj.row);
            $$.clipText_all.val(textObj.table);
            $$.copyPopup.popup("open", {
                x: (e.pageX + 100),
                y: (e.pageY + 60)
            });
        }, tapHoldDelay);
    }

    $("#resultHeader").closest("div").on("vmousedown", ".resultRow li", function(e) {
        tapTimer = makeTapTimer(e);

        var clickedCell = $(this);//==button
        var clickedUl = clickedCell.closest("ul");//==row
        var clickedTable = clickedCell.closest("div");//==table

        textObj.cell = clickedCell.text();

        textObj.row = clickedUl.data('text');
        if(!textObj.row) {
            textObj.row = $.map(clickedUl.find("li"), function(btn, i) {
                return $(btn).text();
            }).join(textJoinStr);
            clickedUl.data('text', textObj.row);
        }

        textObj.table = clickedTable.data('text');
        if(!textObj.table) {
            textObj.table = $.map(clickedTable.find(".resultRow li"), function(btn, i) {
                return $(btn).text();
            }).join(textJoinStr);
            clickedTable.data('text', textObj.table);
        }
    }).on('vmouseup', function() {
        clearTimeout(tapTimer);
        isTapHold = false;
    });
});

未经测试 - 可能需要调试

从UL中的每个LI中选择文本

2 个答案: