代码之家 › 专栏 › 技术社区 › StudioTime

如何将jquery对象呈现为html-seing[object object]

jquery javascript

StudioTime · 技术社区 · 6 年前

我在让jquery对象呈现为html时遇到问题。

在下面的代码中, tickBox 呈现为 [object Object] 而不是html,而其他的都被正确地呈现。

我知道我可以把它加成一个字符串,但这不是我的目标。

为什么 纸盒 不呈现为HTML?

const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox} ${item}`
    /* I know I could do this */
    //html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
  });
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>

5 回复 | 直到 6 年前

31piy 6 年前

问题是,您需要以某种方式将html节点序列化为字符串,以便插值工作正常。

一种方法是 outerHTML 对应的本机元素:

const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox[0].outerHTML} ${item}`
  });
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>

christopher 6 年前

https://api.jquery.com/jQuery/#jQuery-html-attributes

文件表明 jQuery() 函数接受参数 PlainObject . 明器 采取了 html 参数,它应该已经是字符串。它目前正在将javascript对象串成字符串,因此 [object Object] .

您应该将其呈现为html字符串。

Akhil Aravind 6 年前

使用tickbox[0].innerHTML在tickbox中呈现HTML内容

const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox[0].innerHTML} ${item}`
    /* I know I could do this */
    //html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
  });
});
$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>

Rory McCrossan 6 年前

连接 tickBox 元素将是 clone() 一个新的例子 append() 对每个 legendContent 实体,像这样:

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});

const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

.tickBox {
  float: left;
  width: 15px;
  height: 15px;
  background-color: #CCC;
  margin: 0 5px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>

Rakesh Sojitra 6 年前

你必须使用HTML而不是像这样的对象。您正在将整个对象使用到html选项中。你只要换一条线

`${tickBox} ${item}`

到

`${tickBox.wrapAll('<div>').parent().html()} ${item}`

或

`${tickBox[0].outerHTML} ${item}`

为了

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox.wrapAll('<div>').parent().html()} ${item}`
  });
});

JSFiddle