我有这个问题whit数组输出。列表中仅显示 last 数组。但是我希望在jQuery中显示所有这些数组。
$(document).ready(function(){
$("ul").append("<li></li>").text(filmi.Movies[0].Title) //La La Land
$("ul").append("<li></li>").text(filmi.Movies[1].Title) //Fracture
$("ul").append("<li></li>").text(filmi.Movies[2].Title) //Legend
$("ul").append("<li></li>").text(filmi.Movies[3].Title) //Locke
$("ul").append("<li></li>").text(filmi.Movies[4].Title) //Mad Max: Fury Road
});
小提琴JS： https://jsfiddle.net/jjhn1j5t/2/
仅显示： Mad Max：Fury Road
但它应该是这样的：
-La La Land
-Fracture
-Legend
-Locke
-Mad Max: Fury Road
答案 0 :(得分：5)
编写它的方式，.text()会覆盖$('ul')内部的内容，而不是li元素内的内容。您可以更改每一行以使用此格式：
$("ul").append($("<li></li>").text(filmi.Movies[0].Title))
答案 1 :(得分：2)
$("ul").append("<li>"+filmi.Movies[0].Title+"</li>")
答案 2 :(得分：1)
您的$("ul")来电正在按预期覆盖<li>而不是$("ul").append("<li></li>")您的追加。 <li>不会返回您<ul>
$(document).ready(function(){
for (i = 0; i <= 4; ++i) {
addFilm(filmi.Movies[i].Title);
}
});
function addFilm(value){
var $li = $("<li/>");
$li.text(value);
$("ul").append($li);
}
我这样做：
{{1}}
答案 3 :(得分：1)
您只需简单地附加到ul，它会覆盖您每次添加的li。而是添加li并选择它的最后一个实例，然后设置li的文本。
$("ul").append("<li></li>").find('li').last().text(filmi.Movies[i].Title);
示例jsFiddle here。
答案 4 :(得分：0)
var List = $('ul')
var li = $('<li/>')
.text(filmi.Movies[1].Title)
.appendTo(List);
答案 5 :(得分：0)
$(document).ready(function(){
$("ul").append("<li>" +filmi.Movies[0].Title + "</li><li>" + filmi.Movies[1].Title + "</li><li>" + filmi.Movies[2].Title + "</li><li>" + filmi.Movies[3].Title + "</li><li>" + filmi.Movies[4].Title + "</li>")
});
const filmi = {
"Movies": [
{
"Title": "La La Land",
"Year": "2016",
"Rated": "PG-13",
"Released": "25 Dec 2016",
"Runtime": "128 min",
"Genre": "Comedy, Drama, Music",
"Director": "Damien Chazelle",
"Writer": "Damien Chazelle",
"Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
"Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
"Language": "English",
"Country": "USA, Hong Kong",
"Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "8.3/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "93%"
},
{
"Source": "Metacritic",
"Value": "93/100"
}
],
"Metascore": "93",
"imdbRating": "8.3",
"imdbVotes": "232,825",
"imdbID": "tt3783958",
"Type": "movie",
"DVD": "25 Apr 2017",
"BoxOffice": "$150,459,658.00",
"Production": "Liongate Films",
"Website": "http://www.lalaland.movie/",
"Response": "True"
},
{
"Title": "Fracture",
"Year": "2007",
"Rated": "R",
"Released": "20 Apr 2007",
"Runtime": "113 min",
"Genre": "Crime, Drama, Mystery",
"Director": "Gregory Hoblit",
"Writer": "Daniel Pyne (screenplay), Glenn Gers (screenplay), Daniel Pyne (story)",
"Actors": "Anthony Hopkins, Ryan Gosling, David Strathairn, Rosamund Pike",
"Plot": "An attorney, intent on climbing the career ladder toward success, finds an unlikely opponent in a manipulative criminal he is trying to prosecute.",
"Language": "English",
"Country": "USA, Germany",
"Awards": "2 wins & 2 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzIzNjQyMzkwM15BMl5BanBnXkFtZTcwOTg5ODQ0MQ@@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "7.2/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "71%"
},
{
"Source": "Metacritic",
"Value": "68/100"
}
],
"Metascore": "68",
"imdbRating": "7.2",
"imdbVotes": "146,665",
"imdbID": "tt0488120",
"Type": "movie",
"DVD": "14 Aug 2007",
"BoxOffice": "$39,000,000.00",
"Production": "New Line",
"Website": "http://www.fracturemovie.com/",
"Response": "True"
},
{
"Title": "Legend",
"Year": "2015",
"Rated": "R",
"Released": "20 Nov 2015",
"Runtime": "132 min",
"Genre": "Biography, Crime, Drama",
"Director": "Brian Helgeland",
"Writer": "Brian Helgeland, John Pearson (book)",
"Actors": "Paul Anderson, Tom Hardy, Christopher Eccleston, Joshua Hill",
"Plot": "Identical twin gangsters Ronald and Reginald Kray terrorize London during the 1960s.",
"Language": "English",
"Country": "UK, France, USA",
"Awards": "6 wins & 10 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMDQ4MGY0NWUtY2MxOC00YzI5LTg0OTEtZjNmY2Q2ZmM0MTA1XkEyXkFqcGdeQXVyNTQzOTc3MTI@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "7.0/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "61%"
},
{
"Source": "Metacritic",
"Value": "55/100"
}
],
"Metascore": "55",
"imdbRating": "7.0",
"imdbVotes": "106,814",
"imdbID": "tt3569230",
"Type": "movie",
"DVD": "01 Mar 2016",
"BoxOffice": "$14,146,549.00",
"Production": "Universal Studios",
"Website": "http://www.legend-the-movie.com/",
"Response": "True"
},
{
"Title": "Locke",
"Year": "2013",
"Rated": "R",
"Released": "18 Apr 2014",
"Runtime": "85 min",
"Genre": "Drama",
"Director": "Steven Knight",
"Writer": "Steven Knight",
"Actors": "Tom Hardy, Olivia Colman, Ruth Wilson, Andrew Scott",
"Plot": "Ivan Locke, a dedicated family man and successful construction manager, receives a phone call on the eve of the biggest challenge of his career that sets in motion a series of events that threaten his carefully cultivated existence.",
"Language": "English",
"Country": "UK, USA",
"Awards": "7 wins & 31 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTQ1MjE5MzU2M15BMl5BanBnXkFtZTgwNzE4OTMzMTE@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "7.1/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "91%"
},
{
"Source": "Metacritic",
"Value": "81/100"
}
],
"Metascore": "81",
"imdbRating": "7.1",
"imdbVotes": "100,104",
"imdbID": "tt2692904",
"Type": "movie",
"DVD": "12 Aug 2014",
"BoxOffice": "$1,326,469.00",
"Production": "A24 Films",
"Website": "http://www.lockethemovie.com/",
"Response": "True"
},
{
"Title": "Mad Max: Fury Road",
"Year": "2015",
"Rated": "R",
"Released": "15 May 2015",
"Runtime": "120 min",
"Genre": "Action, Adventure, Sci-Fi",
"Director": "George Miller",
"Writer": "George Miller, Brendan McCarthy, Nick Lathouris",
"Actors": "Tom Hardy, Charlize Theron, Nicholas Hoult, Hugh Keays-Byrne",
"Plot": "A woman rebels against a tyrannical ruler in postapocalyptic Australia in search for her home-land with the help of a group of female prisoners, a psychotic worshipper, and a drifter named Max.",
"Language": "English, Russian",
"Country": "Australia, USA",
"Awards": "Won 6 Oscars. Another 210 wins & 193 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyMTE0ODcxNF5BMl5BanBnXkFtZTgwODE4NDQzNTE@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "8.1/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "97%"
},
{
"Source": "Metacritic",
"Value": "90/100"
}
],
"Metascore": "90",
"imdbRating": "8.1",
"imdbVotes": "624,273",
"imdbID": "tt1392190",
"Type": "movie",
"DVD": "01 Sep 2015",
"BoxOffice": "$129,483,877.00",
"Production": "Warner Bros.",
"Website": "http://www.madmaxmovie.com/",
"Response": "True"
},
{
"Title": "The Wolf of Wall Street",
"Year": "2013",
"Rated": "R",
"Released": "25 Dec 2013",
"Runtime": "180 min",
"Genre": "Biography, Comedy, Crime",
"Director": "Martin Scorsese",
"Writer": "Terence Winter (screenplay), Jordan Belfort (book)",
"Actors": "Leonardo DiCaprio, Jonah Hill, Margot Robbie, Matthew McConaughey",
"Plot": "Based on the true story of Jordan Belfort, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.",
"Language": "English, French",
"Country": "USA",
"Awards": "Nominated for 5 Oscars. Another 36 wins & 160 nominations.",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "8.2/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "77%"
},
{
"Source": "Metacritic",
"Value": "75/100"
}
],
"Metascore": "75",
"imdbRating": "8.2",
"imdbVotes": "849,538",
"imdbID": "tt0993846",
"Type": "movie",
"DVD": "25 Mar 2014",
"BoxOffice": "$91,330,760.00",
"Production": "Paramount Studios",
"Website": "http://www.thewolfofwallstreet.com/",
"Response": "True"
}
]
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="seznam-filmov.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Movie list</h1>
<div class="container">
<div class="row">
<div class="col">
<ul class="list-group"></ul>
<br />
<button class="btn btn-outline-primary btn-lg btn-block">Reset</button>
<br/>
</div>
<div class="col">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="" />
<div class="card-block">
<h4 class="card-title"></h4>
<p class="card-text"></p>
</div>
<ul class="list-group list-group-flush"></ul>
<div class="card-block">
<a href="#" class="card-link">Web-Page</a>
<a href="#" class="card-link">IMDb</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
请参阅小提琴https://jsfiddle.net/Ritwika/02zdL2jd/
$("ul").append("<li>" +filmi.Movies[0].Title + "</li><li>" + filmi.Movies[1].Title + "</li><li>" + filmi.Movies[2].Title + "</li><li>" + filmi.Movies[3].Title + "</li><li>" + filmi.Movies[4].Title + "</li>")
}）;
答案 6 :(得分：0)
另一种选择：
filmi.Movies.forEach((movie) =>{
$("ul").append(`<li>${movie.Title}</li>`)
})
这是证明它的小提琴： https://jsfiddle.net/jjhn1j5t/5/