Question

我怎么能拆分字符串或从字符串中获取不正常的单词。我正在尝试获取像这样的whit <li></li>元素的输出：

-Ryan Gosling
-Emma Stone 
-Amiée Conn 
-Terry Walters

但它一直在单行中显示：Ryan Gosling，Emma Stone，AmiéeConn，Terry Walters，

小提琴JS代码： https://jsfiddle.net/ysch9hfg/5/

 $(document).ready(function() {
      $("button").click(function () {
        $("ul.list-group.list-group-flush").append('<li class="list-group-item">' + (filmi.Movies[0].Actors) + '</li>')
          });
    });

Answer 1

https://jsfiddle.net/9bwwuobw/

$("ul.list-group.list-group-flush").append(
    '<li class="list-group-item">' + 
    (filmi.Movies[0].Actors.split(', ').join(
         '</li><li class="list-group-item">'
     ) + '</li>'
 )});

Answer 2

使用split函数进行。然后迭代每个循环：

 $(document).ready(function() {
  $("button").click(function () {

  var res = filmi.Movies[0].Actors.split(", ");

  $(res).each(function(key,value){


   $("ul.list-group.list-group-flush").append('<li class="list-group-item">' + value + '</li>')
      });
  })

});

https://angular.io/guide/quickstart

Answer 3

请检查代码

fiddle Link

class Bridge {
  constructor(win, root) {
    this.win = win;
    this.root = root;
    this.bindEvents();

    this.post = this.factoryMethod('post', 'postResult');

  }

  post(eventName, paramObject) {
    this.win.postMessage([eventName, JSON.stringify(paramObject)], this.root);
  }

  bindEvents() {
    window.addEventListener('message', e => this.handleEvents(e));
  }

  handleEvents(e) {
    const eventName = e.data[0];
    const eventObj = e.data[1];
    if (typeof eventName !== 'undefined' && eventName != null) {
      $(window).trigger(eventName, eventObj);
    }
  }

  factoryMethod(msgIn, msgOut) {
    return (cb) => {
      this.post(msgIn, {});
      $(window).on(msgOut, (e, arg) => cb(arg));
    };
  }

}

export default Bridge;

Answer 4

虽然你可以拆分和加入LI，但这更符合jQuery的精神

＆＃13;

$(function() {
  $("button").click(function() {
     $.each(filmi.Movies[0].Actors.split(", "),function(_,actor) {
      // here you can process actor - add image etc
      $("ul.list-group.list-group-flush")
        .append('<li class="list-group-item">' + actor + '</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"
  }]
}

＆＃13;

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

＆＃13;

<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" />
<h1>Actors</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">Display</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">
        </div>
      </div>
    </div>

  </div>
</div>

＆＃13;

将字符串格式化为HTML <li>元素

4 个答案: