Javascript 如何将CSS应用于此jQuery函数的结果?
我希望以下搜索结果以无序列表的形式返回,并将其命名为“我的结果”。我无法在下面的代码中找到我的班级名称 HTML是动态生成的。页面上不存在这样的静态元素:Javascript 如何将CSS应用于此jQuery函数的结果?,javascript,jquery,css,Javascript,Jquery,Css,我希望以下搜索结果以无序列表的形式返回,并将其命名为“我的结果”。我无法在下面的代码中找到我的班级名称 HTML是动态生成的。页面上不存在这样的静态元素: <ul class="my-results"></ul> 这是我正在使用的函数 $(document).ready(function() { var cache = {}; $( '#top-search-input' ).autocomplete({ source: function
<ul class="my-results"></ul>
这是我正在使用的函数
$(document).ready(function() {
var cache = {};
$( '#top-search-input' ).autocomplete({
source: function( request, response ) {
if (request.term in cache) {
response(cache[request.term]);
return;
}
$.ajax({
url: "http://example.com/search",
data: {
q: "*" + request.term + "*",
type: "Search",
view: "json",
},
dataType: "json",
success: function( data ) {
if (data.length) {
cache[request.term] = data;
}
response(data);
}
});
},
minLength: 2,
select: function( event, ui ) {
window.location = ui.item.url;
},
}).data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
var elemHTML = $('<a></a>').attr('href', item.url);
elemHTML.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
elemHTML.append('<span class="title">' + item.title + '</span>');
return $( '<li class="ui-menu-item" >' )
.append( elemHTML )
.appendTo( ul );
};
});
在代码集的最后一行之后:
$("ul").addClass("my-results");
更新:更换发动机的内部零件
data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
为此:
var elemHTML = $('<a></a>').attr('href', item.url);
elemHTML.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
elemHTML.append('<span class="title">' + item.title + '</span>');
// alert($('body').find('ul').hasClass("my_result"));
if($("ul").hasClass("my_result")){
// console.log('if');
return $('ul').append($( '<li class="ui-menu-item" >' )
.append( elemHTML ).append('</li>'));
}else{
// console.log('else');
return $('<ul class="my_result" >').append($( '<li class="ui-menu-item" >' )
.append( elemHTML ).append('</li>')).appendTo('body');
}
它应该适合您。您在代码集的最后一行之后说过。我不知道你指的是哪一行。它似乎不能超出功能体。谢谢你为我澄清…身份很难理解。尝试后。附加到ul;我建议您,将“我的结果”的名称更改为“我的结果”。我将更改名称。但是如果我在后面加上这个,附加到ul;我不知道它是如何工作的,因为函数中return语句之后的任何内容都没有效果。我不太懂javascript,但这条规则应该适用于任何语言;“我的结果”类尚未在HTML中的任何位置定义。此函数返回的HTML是唯一具有此类名称的HTML。您将如何附加到页面上不存在的内容。最好使用createElement语句创建ul,然后将结果附加到此内容,然后将此ul附加到正文。我建议最好在有结果时将ul隐藏在页面上,然后仅附加并显示结果。我是说在您的dom中不会有任何ul,所以您将如何附加到它。完全正确!这就是我的观点。你的回答建议我附加到不存在的东西上。我希望你能给我一个有效的答案。ul是动态生成的,如本演示中所示:
var elemHTML = $('<a></a>').attr('href', item.url);
elemHTML.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
elemHTML.append('<span class="title">' + item.title + '</span>');
// alert($('body').find('ul').hasClass("my_result"));
if($("ul").hasClass("my_result")){
// console.log('if');
return $('ul').append($( '<li class="ui-menu-item" >' )
.append( elemHTML ).append('</li>'));
}else{
// console.log('else');
return $('<ul class="my_result" >').append($( '<li class="ui-menu-item" >' )
.append( elemHTML ).append('</li>')).appendTo('body');
}