Как л oop через - PullRequest
Новая
       14

Как л oop через

1 голос
/ 27 апреля 2020

У меня есть html исходный код в качестве переменной и я хочу l oop через каждый li и извлечь необходимые данные. Я пытался использовать $ (strVar) .find ("li"). Each (function () {alert ($ (this) .text ());}); но я не мог получить данные между ними! Не могли бы вы, ребята, показать мне, как это можно сделать. Спасибо 

Data to extract from first li:
-1(li class id)
-https://website.com/image1.jpg (li background image url)
-writing reports(div text with class name:class="task_name")
-for items sold(div text with class name:class="training_text")
-1.mp4(input value with class name: class="video")

Data to extract from second li:
-2(li class id)
-https://website.com/image2.jpg(li background image url)
-drawing(div text with class name class="task_name")
-using oil paint(div text with class name:class="training_text")
-2.mp4(input value with class name: class="video")

html код: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function MyFunction()
{
var strVar="";
strVar += "<li class=\"tasks\" id=\"1\">";
strVar += "";
strVar += "<div style=\"background-image:url(https:\/\/website.com\/image1.jpg);overflow:visible; z-index:2; position:relative;\" class=\"ex_thumbnail\">";
strVar += "      <div class=\"float-right\"><\/div>";
strVar += "      <img class=\"vipicon\" src=\"https:\/\/www.awebsite.com\/vip.svg\"\/>      ";
strVar += "   <\/div>";
strVar += "   <div class=\"task_texts \"";
strVar += "      style=\"\"";
strVar += "      >";
strVar += "      <div class=\"task_name\">writing reports<\/div>";
strVar += "      <div class=\"training_text\">for items sold<\/div>";
strVar += "   <\/div>";
strVar += "   <input type=\"hidden\" class=\"image1\" value=\"11.jpg\"\/>";
strVar += "   <input type=\"hidden\" class=\"tools\" value=\"adobe photshop\"\/>";
strVar += "   <input type=\"hidden\" class=\"video\" value=\"1.mp4\"\/> ";
strVar += "   <input type=\"hidden\" class=\"thumbnail\" value=\"14.jpg\"\/>";
strVar += "";
strVar += "<\/li>";
strVar += "";
strVar += "<li class=\"tasks\" id=\"2\">";
strVar += "";
strVar += "<div style=\"background-image:url(https:\/\/website.com\/image2.jpg);overflow:visible; z-index:2; position:relative;\" class=\"ex_thumbnail\">";
strVar += "      <div class=\"float-right\"><\/div>";
strVar += "      <img class=\"vipicon\" src=\"https:\/\/www.awebsite.com\/vip.svg\"\/>      ";
strVar += "   <\/div>";
strVar += "   <div class=\"task_texts \"";
strVar += "      style=\"\"";
strVar += "      >";
strVar += "      <div class=\"task_name\">drawing<\/div>";
strVar += "      <div class=\"training_text\">using oil paint<\/div>";
strVar += "   <\/div>";
strVar += "   <input type=\"hidden\" class=\"image1\" value=\"12.jpg\"\/>";
strVar += "   <input type=\"hidden\" class=\"tools\" value=\"brush\"\/>";
strVar += "   <input type=\"hidden\" class=\"video\" value=\"2.mp4\"\/> ";
strVar += "   <input type=\"hidden\" class=\"thumbnail\" value=\"15.jpg\"\/>";
strVar += "";
strVar += "<\/li>";

//here I want to loop through each <li and extract the required data and display them in group
}
</script>

</head>

<body>
<br>
<button onclick="MyFunction()">Parse Li</button>

</body>

</html>

1 Ответ

1 голос
/ 27 апреля 2020

Основная проблема с кодом, который вы показали, состоит в том, что вы используете find(), однако li, который вы пытаетесь получить, это root объекты в HTML, поэтому вам нужно вместо этого используйте filter().

Оттуда вы можете использовать map() для создания массива объектов, содержащих данные, которые вам нужно извлечь из li: 

let bgRe = /^url\((['"]?)(.*)\1\)$/
let data = $(strVar).filter("li").map(function() {
  let $li = $(this);
  return {
    id: this.id,
    bgImageUrl: bgRe.exec($li.find('.ex_thumbnail').css('background-image'))[2],
    reports: $li.find('.task_name').text().trim(),
    items: $li.find('.training_text').text().trim(),
    video: $li.find('.video').val()
  }
}).get();


function MyFunction() {
  var strVar = "";
  strVar += "<li class=\"tasks\" id=\"1\">";
  strVar += "";
  strVar += "<div style=\"background-image:url(https:\/\/website.com\/image1.jpg);overflow:visible; z-index:2; position:relative;\" class=\"ex_thumbnail\">";
  strVar += "      <div class=\"float-right\"><\/div>";
  strVar += "      <img class=\"vipicon\" src=\"https:\/\/www.awebsite.com\/vip.svg\"\/>      ";
  strVar += "   <\/div>";
  strVar += "   <div class=\"task_texts \"";
  strVar += "      style=\"\"";
  strVar += "      >";
  strVar += "      <div class=\"task_name\">writing reports<\/div>";
  strVar += "      <div class=\"training_text\">for items sold<\/div>";
  strVar += "   <\/div>";
  strVar += "   <input type=\"hidden\" class=\"image1\" value=\"11.jpg\"\/>";
  strVar += "   <input type=\"hidden\" class=\"tools\" value=\"adobe photshop\"\/>";
  strVar += "   <input type=\"hidden\" class=\"video\" value=\"1.mp4\"\/> ";
  strVar += "   <input type=\"hidden\" class=\"thumbnail\" value=\"14.jpg\"\/>";
  strVar += "";
  strVar += "<\/li>";
  strVar += "";
  strVar += "<li class=\"tasks\" id=\"2\">";
  strVar += "";
  strVar += "<div style=\"background-image:url(https:\/\/website.com\/image2.jpg);overflow:visible; z-index:2; position:relative;\" class=\"ex_thumbnail\">";
  strVar += "      <div class=\"float-right\"><\/div>";
  strVar += "      <img class=\"vipicon\" src=\"https:\/\/www.awebsite.com\/vip.svg\"\/>      ";
  strVar += "   <\/div>";
  strVar += "   <div class=\"task_texts \"";
  strVar += "      style=\"\"";
  strVar += "      >";
  strVar += "      <div class=\"task_name\">drawing<\/div>";
  strVar += "      <div class=\"training_text\">using oil paint<\/div>";
  strVar += "   <\/div>";
  strVar += "   <input type=\"hidden\" class=\"image1\" value=\"12.jpg\"\/>";
  strVar += "   <input type=\"hidden\" class=\"tools\" value=\"brush\"\/>";
  strVar += "   <input type=\"hidden\" class=\"video\" value=\"2.mp4\"\/> ";
  strVar += "   <input type=\"hidden\" class=\"thumbnail\" value=\"15.jpg\"\/>";
  strVar += "";
  strVar += "<\/li>";

  let bgRe = /^url\((['"]?)(.*)\1\)$/
  let data = $(strVar).filter("li").map(function() {
    let $li = $(this);
    return {
      id: this.id,
      bgImageUrl: bgRe.exec($li.find('.ex_thumbnail').css('background-image'))[2],
      reports: $li.find('.task_name').text().trim(),
      items: $li.find('.training_text').text().trim(),
      video: $li.find('.video').val()
    }
  }).get();
  
  console.log(data);
}

MyFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...