使用jQuery创建DOM元素 [英] Create DOM element with jQuery
问题描述
我有一个功能
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
$("#lstCodelist option").each(function () {
var sp = $(this).text();
var sp1 = sp.split(' ');
$.each(sp1, function (i, l) {
if (l == htext) {
var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + htext + "</div>";
$(document).append(boldText);
}
});
});
});
});
我更新了代码,但没有运气. 在此代码中,我需要创建一个具有DOM元素的l来将黄色应用到该颜色.
I updated the code but no luck. Here in this code I need to create a l has a DOM element to apply color yellow to that.
请问任何人都可以帮助我如何创建一个dom元素.
please can any body help me out how to create a dom element.
谢谢
推荐答案
我不明白l
在当前代码中的位置.无论如何,您可以使用jQuery创建一个DOM元素,如下所示:var myel = $('<div class="someclass"></div>')
.然后,您可以使用.appendTo()
,.after()
等功能将myel
附加到DOM中的任意位置.
I didn't understand where does l
is in your current code. Anyway, you can create a DOM element with jQuery like this: var myel = $('<div class="someclass"></div>')
. Then you can append myel
to wherever you want in the DOM using function like .appendTo()
, .after()
, etc.
编辑
您似乎正在尝试突出显示<option>
元素内的某些单词.我怀疑这是否适用于所有浏览器,因为表单元素在CSS方面有些棘手.您可以尝试以下操作(未经测试):
You seem to be trying to highlight some words inside an <option>
element. I have doubts if that is going to work on all browsers, since form elements are a little tricky when it comes to CSS. You can try something like this (untested):
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
$("#lstCodelist option").each(function () {
var sp = $(this).text();
var re = new RegExp("\\b" + htext + "\\b")
sp = sp.replace(re, '<span class="highlighted">$1</span>', "gi");
$(this).html(sp);
});
});
});
您还需要在页面上添加一些CSS,以定义.highlighted
You also need some CSS on your page, defining the style for .highlighted
聊天后更新
我可以使用<p>
而不是<option>
来解决表单元素样式的问题:
I got something working using a <p>
instead of <option>
, to rule out the problem of form element styling:
更新后的js(以防删除小提琴):
The updated js (in case fiddle is deleted):
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
//$("#lstCodelist option").each(function () {
$("p").each(function () {
var sp = $(this).text();
var re = new RegExp("\\b(" + htext + ")\\b")
var sOpen = "<span class='highlight'>";
var sClose = "</span>";
var newhtml = sp.replace(re, sOpen + "$1" + sClose, "gi");
$(this).html(newhtml);
});
});
});
这篇关于使用jQuery创建DOM元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!