如何在jquery + jquery mobile的每一個新行上創建複選框？

Question

我需要在每一個新行。我通過檢查height.But了新的生產線的情況下，我需要添加主DIV 2個DIV中第一個div包含複選框。而第二個div包含。我現在所面臨的數據創建checkbok在那件事

困難這是我的小提琴。 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); 
}); 

我需要使用複選框左格這樣的但不能夠做到這一點。

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

---

如果你有可變行高度，你可以嘗試刪除CSS爲.cb並添加此：

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

如果複選框，他們將在頂部顯示...如果你點擊頂部的行，它會滾動到它。