javascript - 如何在 jquery jquery mobile 中的每一行上创建复选框？

Question

我需要在每一行上创建复选框。我通过检查高度得到了新行的事件。但是我需要在主 div 中添加两个 div，其中第一个 div 包含复选框。第二个 div 包含数据。我是在那件事上遇到困难

这是我的 fiddle 。 http://jsfiddle.net/naveennsit/TnTj9/1/

$(function() {
  var h = -1;
  setInterval(function () {


    var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
    if(h == -1) h = newHeight;
    if(h != newHeight) {
        h = newHeight;
//        alert("I've changed height");
    }
  }, 1000);
});

我需要像这样在左侧 div 中使用复选框，但无法做到这一点。

$("#leftdiv").append( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );

Answer 1

我相信这就是你要找的

Fiddle

JS:

$(function() {
  var h = -1;
  setInterval(function () {
    var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
    if(h == -1) h = newHeight;
    if(h != newHeight) {
        h = newHeight;
        $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
    }
  }, 100);
});

CSS:

#left {
    float:left;
}
#realTimeContents {
    width:400px;
    line-height: 25px;
}
.cb {
    height:25px;
}

HTML:

<div id="left"><div class='cb'><input type="checkbox" /></div></div><div id="realTimeContents" class ="left realtimeContend_h"> 
</div>

---

如果您有可变行高，您可以尝试删除 .cb 的 css 并添加:

if(h != newHeight) {
    $("#left").find(".cb").last().css("height", newHeight-h);
    h = newHeight;         
    $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
}

---

这是一个更新，其中包含您似乎希望从评论中获得的功能:

Fiddle

我添加了一些 DOM 和这个 JS:

$("#left").on("click", "input", function () {
    var checkedIndexes = "";
    var $cbs = $("#left").find("input");
    $cbs.filter(":checked").each(function () {
        checkedIndexes += "<span>" + $cbs.index(this) + "</span>";
    });
    $("#checkedRows").html(checkedIndexes);
});

$("#checkedRows").on("click", "span", function () {
    var $box = $("#left").find("input").eq(this.innerHTML);
    var $content = $("#content");
    $content.scrollTop(
    $box.offset().top - $content.offset().top + $content.scrollTop());
});

如果您选中复选框，它们将显示在顶部...如果您单击顶部的行，它将滚动到它。