[英]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);
}
});
});
});
});
我更新了代码,但没有运气。 在此代码中,我需要创建al具有一个DOM元素以将黄色应用于该元素。
请任何人帮助我如何创建dom元素。
谢谢
我不明白l
在您当前的代码中在哪里。 无论如何,您可以使用jQuery这样创建DOM元素: var myel = $('<div class="someclass"></div>')
。 然后,你可以追加myel
,无论你使用的功能就像要在DOM .appendTo()
.after()
等。
编辑
您似乎正在尝试突出显示<option>
元素内的一些单词。 我怀疑这是否适用于所有浏览器,因为表单元素在CSS方面有些棘手。 您可以尝试以下操作(未经测试):
$(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
的样式
聊天后更新
我可以使用<p>
而不是<option>
来解决表单元素样式化的问题:
更新的js(以防删除小提琴):
$(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);
});
});
});
像这样吗
$(document).append($('<div />').css('color', 'yellow'));
这将在文档中追加一个黄色的新div。 如果需要将其添加到特定元素,只需使用$('#myselector')
代替$(document)
它很简单
var newEl = $('<div THE_ATTRIBUTES_YOU_WANT></div>');
$('THE_ELEMENT_YOU_WANT_TO_APPEND_OR_ADD').append(newEl);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.