Question

我在jquery对话框中显示从webservice客户端返回的数据，动态地在表格结构中每行还有一个按钮来选择行的值并将其返回到主窗口

 $("<div/>")
        .attr({ "class": "line dataRow ProductSearchResultRow",
            "custom:id": vProdLines[i].id,
            "custom:title": vProdLines[i].title,
            "custom:composer": vProdLines[i].composer,
            "custom:performer": vProdLines[i].performer,
            "custom:rec": vProdLines[i].rec
        })
        .append($("<div/>").attr({ "class": "unit size3p" }).html($("<label/>").html(vProdLines[i].rec)))
        .append($("<div/>").attr({ "class": "unit size1of5" }).html($("<label/>").html(vProdLines[i].title)))
        .append($("<div/>").attr({ "class": "unit size1of8" }).html($("<label/>").html(vProdLines[i].composer)))
        .append($("<div/>").attr({ "class": "unit size1of8" }).html($("<label/>").html(vProdLines[i].arranger)))
        .append($("<div/>").attr({ "class": "unit size1of8" }).html($("<label/>").html(vProdLines[i].performer)))
        .append($("<div/>").attr({ "class": "unit size1of10" }).html($("<label/>").html(vProdLines[i].publisher)))
        .append($("<div/>").attr({ "class": "unit size8p" }).html($("<label/>").html(vProdLines[i].label)))
        .append($("<div/>").attr({ "class": "unit size8p" }).html($("<label/>").html(vProdLines[i].catNo)))
        .append($("<div/>").attr({ "class": "unit size5p" })

                    .append($("<div/>").attr({ "class": "unit size1of10" })
                           .append($("<input/>")
                                    .attr({ "type": "button" })
                                    .val("Select")
                                    .click(function () {
                                        $("div.ProdSearchResultRow").removeClass("SelectedRow");
                                        $(this).addClass("SelectedRow");
                                        $("#newProdTitleId").val($(this).attr("custom:id"));
                                        $("input#txtProdSheetSelectedMusicTitle").val($(this).attr("custom:title"));
                                        $("input#txtProdSheetSelectedComposer").val($(this).attr("custom:composer"));
                                        $("input#txtProdSheetSelectedPerformer").val($(this).attr("custom:performer"));
                                        $("#tdProdNewRec").children("select").val($(this).attr("custom:rec"));
                                        ClosePopupBox("modalProdSearch");

这一切都显示得很好，对话框也关闭但我无法获得该值每个div元素内的标签中的行。

我已经明白使用'this'实际上会指向按钮而不是主div，但是当单击按钮时无法获取行的值。

渲染页面html是这样的：

<div class="line dataRow MusicSearchResultRow" id="myid_1452708" id="myid_1452708"
    custom:title="TEST" custom:id="1452708" custom:composer="AL" custom:performer="AL"
    custom:rec="C">
    <div class="unit size3p">
        <label>
            C</label></div>
    <div class="unit size1of5">
        <label>
            TEST</label></div>
    <div class="unit size1of8">
        <label>
            AL</label></div>
    <div class="unit size1of8">
        <label>
            AL</label></div>
    <div class="unit size1of8">
        <label>
            AL</label></div>
    <div class="unit size1of10">
        <label>
        </label>
    </div>
    <div class="unit size8p">
        <label>
        </label>
    </div>
    <div class="unit size8p">
        <label>
            1234</label></div>
    <div class="unit size5p">
        <input type="button" value="info"></div>
    <div class="unit size1of10">
        <input type="button" value="Select"></div>
</div>

Answer 1

您是否尝试过为您的div提供ID并从中获取attr？

$("<div/>")
    .attr({ "id": "myid",
       "class": "line dataRow ProductSearchResultRow", //rest of it

然后点击按钮点击

$(this).attr(

与

$("#myid").attr(

id需要是qunique，因此您可能需要执行类似

的操作

$("<div/>")
    .attr({ "id": "myid_" + vProdLines[i].id,

并点击按钮

$("#myid_" + vProdLines[i].id).attr(

Answer 2

要隔离实例this将是单击的元素，然后您可以使用closest()来获取行实例。

获得行实例后，您可以使用行中的find()来访问该行的其他元素

$("<input/>")
    .attr({
    "type": "button"
})
    .val("Select")
    .click(function () {
    var $buttonClicked = $(this),
        $closestRow = $buttonClicked.closest('.ProdSearchResultRow');

    var $anotherElementInThisRow = $closestRow.find('.someClass');
});

熟悉traversal methods section of the API。

在jquery对话框中单击按钮获取label的值

2 个答案: