时间戳

首页 > 解决方案 > 如何在 jQuery 上附加 [string] [jquery object] [string]

javascript - 如何在 jQuery 上附加 [string] [jquery object] [string]

问题描述

我有以下

 var container = $(document.createElement('div'));
 var part1 = `<div  style="padding:5px" id="div${iCnt}"><input type='checkbox' onchange="checkboxOnChange(this,'${tmpId}')"/> `;
 var jqueryObj = tmpCp;
 var part2 =  `Log file ${iCnt}: <input type=text class="input" id="tb${iCnt}"> <input id="tbid${iCnt}" type="hidden" value="${tmpId}"/></div>`;

 $(container).append(part1);
 $(container).append(jqueryObj);
 $(container).append(part2);

我要存档的是第1 部分<div>的所有内容，但是如果我使用附加，它将在第 1 部分</div>之后自动生成一个关闭标签。如果我将它们放在一起，jquery 对象将解析为字符串，显示为 [Object object]：/

编辑：

                    var tmpCp = $(document.createElement('div')).css({margin:'5px',width: '30px',height: '30px',background: 'url(./images/select.png) center'});
                    var cpId = tmpId+"_"+"CP";
                    tmpCp.attr('id',cpId);
                    tmpCp.ColorPicker({
                        color: '#0000ff',
                        onShow: function (colpkr) {
                            $(colpkr).fadeIn(500);
                            return false;
                        },
                        onHide: function (colpkr) {
                            $(colpkr).fadeOut(500);
                            return false;
                        },
                        onChange: function (hsb, hex, rgb) {
                            $(`#${cpId}`).css('backgroundColor', '#' + hex);        
                            $(`.${tmpId}`).css('background', '#' + hex);
                        }
                    });

在此处输入图像描述

在此处输入图像描述

标签： javascriptjquery

解决方案

不知道这是一种理想的方法，但以下是我想要的，希望有人能告诉我一个正确的方法，大声笑。

诀窍是，一旦第 1 部分和第 2 部分 HTML 字符串附加到 continer DIV，我使用:first-child选择器获取第一个孩子并将 jqueryObject 附加到中间。

在此处输入图像描述

var part1 = `<div  style="padding:5px;display:flex;align-items:center;" id="div${iCnt}">    <input type='checkbox' onchange="checkboxOnChange(this,'${tmpId}')" checked/> `;                
var part2 =  `Log file ${iCnt}: <input type=text class="input" id="tb${iCnt}" > <input id="tbid${iCnt}" type="hidden" value="${tmpId}"/></div>`;
container.append(part1+part2);                          

$('#links').append(container);
var firstChild = $(`#div${iCnt} :first-child`);
tmpCp.insertAfter(firstChild);

推荐阅读