如何将 Class 添加到 ul li
How to add Class to ul li
嘿,我有这个 javascript 代码
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul>";
html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li>" + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
并且我需要将 class (.list-group) 添加到输出 ul 列表
和 li 元素 (.list-group-item)
我用
试过了
$("ul").addClass("list-group");
$("li").addClass("list-group-item");
但它不起作用
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += '<ul class="list-group">';
html += '<li class="list-group-item"><a href="' + item['headline'] + '">' + item['headline/_text'] + "</a></li>";
html += '<li class="list-group-item">' + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
我认为最简单的方法是在生成 HTML 字符串的地方添加。像这样:
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul class='list-group'>";
html += "<li class='list-group-item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li class='list-group-item'>" + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
或者,您可以在附加到 DOM 之后执行此操作,如下所示:
$(".container").append(html);
$(".container > ul").addClass('list-group');
$(".container > ul > li").addClass('list-group-item');
追加到容器上就可以了
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul>";
html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li>" + item.description + "</li>";
html += "</ul>";
});
$(".container").append(html);
$("ul").addClass("list-group");
$("li").addClass("list-group-item");
});
我认为这里不需要 setTimeout
。
或者,如果出于某种原因您更喜欢 setTimeout,则将 addClass
保留在 setTimeout
内
setTimeout(function() {
$(".container").append(html);
$("ul").addClass("list-group"); //or $(".container ul")
$("li").addClass("list-group-item");// or $(".container ul li")
}, 1500);
但是在这两种情况下,addClass 都需要在 ul
和 li
成为您的 DOM 的一部分之后完成。
将 targetContainer 保存在一个变量中,然后使用 find
方法获取 li 和 ul,如下所示:
targetContainer = $(".container");
setTimeout(function() {
targetContainer.append(html);
targetContainer.find('ul').addClass('list-group');
targetContainer.find('ul li').addClass('list-group-item');
}, 1500);
我打赌你的问题与你的超时有关。可能您尝试获取尚未初始化的 DOM 元素。
我在 setTimeout 函数中建议您的代码:
setTimeout(function() {
$(".container").append(html);
$("ul").addClass("list-group");
$("li").addClass("list-group-item");
}, 1500);
这样您就已经初始化了 DOM,并且 $("ul") 和 $("li") 将找到要添加 类 的元素。
嘿,我有这个 javascript 代码
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul>";
html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li>" + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
并且我需要将 class (.list-group) 添加到输出 ul 列表 和 li 元素 (.list-group-item)
我用
试过了 $("ul").addClass("list-group");
$("li").addClass("list-group-item");
但它不起作用
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += '<ul class="list-group">';
html += '<li class="list-group-item"><a href="' + item['headline'] + '">' + item['headline/_text'] + "</a></li>";
html += '<li class="list-group-item">' + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
我认为最简单的方法是在生成 HTML 字符串的地方添加。像这样:
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul class='list-group'>";
html += "<li class='list-group-item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li class='list-group-item'>" + item.description + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
或者,您可以在附加到 DOM 之后执行此操作,如下所示:
$(".container").append(html);
$(".container > ul").addClass('list-group');
$(".container > ul > li").addClass('list-group-item');
追加到容器上就可以了
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<ul>";
html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
html += "<li>" + item.description + "</li>";
html += "</ul>";
});
$(".container").append(html);
$("ul").addClass("list-group");
$("li").addClass("list-group-item");
});
我认为这里不需要 setTimeout
。
或者,如果出于某种原因您更喜欢 setTimeout,则将 addClass
保留在 setTimeout
setTimeout(function() {
$(".container").append(html);
$("ul").addClass("list-group"); //or $(".container ul")
$("li").addClass("list-group-item");// or $(".container ul li")
}, 1500);
但是在这两种情况下,addClass 都需要在 ul
和 li
成为您的 DOM 的一部分之后完成。
将 targetContainer 保存在一个变量中,然后使用 find
方法获取 li 和 ul,如下所示:
targetContainer = $(".container");
setTimeout(function() {
targetContainer.append(html);
targetContainer.find('ul').addClass('list-group');
targetContainer.find('ul li').addClass('list-group-item');
}, 1500);
我打赌你的问题与你的超时有关。可能您尝试获取尚未初始化的 DOM 元素。 我在 setTimeout 函数中建议您的代码:
setTimeout(function() {
$(".container").append(html);
$("ul").addClass("list-group");
$("li").addClass("list-group-item");
}, 1500);
这样您就已经初始化了 DOM,并且 $("ul") 和 $("li") 将找到要添加 类 的元素。