Question

我知道这很简单。但我感到困惑。这就是我在这里发布的原因。

请参阅我的html结构

<li class="1-li normal"><a href="#"><img src="#"></a></li>
<li class="2-li normal"><a href="#"><img src="#"></a></li>
<li class="3-li normal"><a href="#"><img src="#"></a></li>
<li class="4-li normal"><a href="#"><img src="#"></a></li>
<li class="5-li normal"><a href="#"><img src="#"></a></li>

我在javascript中有一个字符串

  var strintg_value="a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";

这里我可以使用* make it as array来分割strintg_value

   strintg_value[1]="a.html+a.jpeg";
   strintg_value[2]="b.html+b.jpeg";
   strintg_value[3]="c.html+c.jpeg";
   strintg_value[4]="d.html+d.jpeg";
   strintg_value[5]="e.html+e.jpeg";

并且最后我需要为href和img src提供适当的值，如此

<li class="1-li normal"><a href="a.html"><img src="a.lpeg"></a></li>
<li class="2-li normal"><a href="b.html"><img src="b.jpeg"></a></li>
<li class="3-li normal"><a href="c.html"><img src="c.jpeg"></a></li>
<li class="4-li normal"><a href="d.html"><img src="d.hpeg"></a></li>
<li class="5-li normal"><a href="e.html"><img src="e.jpeg"></a></li>

请帮助解决这个问题。

我试过这个strintg_value=strintg_value.split('*'); 之后，我不知道如何执行其余的。请帮助。

Answer 1

您必须重新使用split并再次将值拆分为数组。然后使用这个数组用循环填充你的html元素。

var strintg_value="a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";

strintg_value = strintg_value.split('*');

for (var i = 0; i < strintg_value.length; ++i) {
    var element = strintg_value[i].split('+');
    $('.' + (i + 1) + '-li').find('a').attr('href', element[0]).find('img').attr('src', element[1]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="1-li normal"><a href="#"><img src="#"></a></li>
<li class="2-li normal"><a href="#"><img src="#"></a></li>
<li class="3-li normal"><a href="#"><img src="#"></a></li>
<li class="4-li normal"><a href="#"><img src="#"></a></li>
<li class="5-li normal"><a href="#"><img src="#"></a></li>

Answer 2

ES6版本：

let strintg_value = 'a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg';

strintg_value.split('*').forEach( (value,index) => {
	let s = value.split("+") // ["a.html", "a.jpeg"]
	$(`li.${index+1}-li a`).attr("href", s[0])
	$(`li.${index+1}-li img`).attr("src", s[1])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="1-li normal"><a href="#"><img src="#"></a></li>
<li class="2-li normal"><a href="#"><img src="#"></a></li>
<li class="3-li normal"><a href="#"><img src="#"></a></li>
<li class="4-li normal"><a href="#"><img src="#"></a></li>
<li class="5-li normal"><a href="#"><img src="#"></a></li>

Answer 3

拆分字符串，然后映射并拆分每个条目以获取链接并将img src分开。然后你可以循环遍历lis并在a和img上设置属性：

＆＃13;

var str = "a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";
let s = str.split('*').map(e => e.split('+'));
let lis = document.getElementsByTagName('li');

for (let i = 0; i < lis.length && i < s.length; i++) {
  lis[i].querySelector('a').setAttribute('href', s[i][0]);
  lis[i].querySelector('img').setAttribute('src', s[i][1]);
}

＆＃13;

<li class="1-li normal">
  <a href="#"><img src="#"></a>
</li>
<li class="2-li normal">
  <a href="#"><img src="#"></a>
</li>
<li class="3-li normal">
  <a href="#"><img src="#"></a>
</li>
<li class="4-li normal">
  <a href="#"><img src="#"></a>
</li>
<li class="5-li normal">
  <a href="#"><img src="#"></a>
</li>

＆＃13;

Answer 4

你可以在拆分后使用地图：

var strintg_value="a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";

    var formatted = strintg_value.split('*').map(function(item){
      var splitItem = item.split('+');
      return {
        link: splitItem [0],
        src: splitItem[1]
      };
    });

这会使数组格式化为具有link和src属性的对象数组。

Answer 5

首先，使用strintg_value.split('*');将字符串转换为array

其次，您可以遍历每个li元素并使用i应用正确的strintg_value值来获取索引。

var strintg_value = "a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";
strintg_value = strintg_value.split('*');

$("li[class*=-li]").each(function(i,x) {
  var href = strintg_value[i].split('+')[0];
  var src = strintg_value[i].split('+')[1];
  $(this).find("a").attr("href", href);
  $(this).find("img").attr("src", src);
})

var strintg_value = "a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg";
strintg_value = strintg_value.split('*');

$("li[class*=-li]").each(function(i,x) {
  var href = strintg_value[i].split('+')[0];
  var src = strintg_value[i].split('+')[1];
  $(this).find("a").attr("href", href);
  $(this).find("img").attr("src", src);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="1-li normal">
  <a href="#">a<img src="#" /></a>
</li>
<li class="2-li normal">
  <a href="#">b<img src="#" /></a>
</li>
<li class="3-li normal">
  <a href="#">c<img src="#" /></a>
</li>
<li class="4-li normal">
  <a href="#">d<img src="#" /></a>
</li>
<li class="5-li normal">
  <a href="#">e<img src="#" /></a>
</li>

Answer 6

您可以使用String.prototype.split()一次按*拆分，然后使用Array.prototype.forEach()遍历所有元素document.querySelectorAll('ul li')并使用元素index拆分再次，但这次由+和当前元素使用document.querySelector()来查询a元素和img以进行正确的更新..

代码：

var strintg_value = 'a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg',
    arr = strintg_value.split('*');

document.querySelectorAll('ul li').forEach(function (el, index) {
  var subArr = arr[index].split('+');
  el.querySelector('a').href = subArr[0];
  el.querySelector('img').src = subArr[1];      
  console.log(el.innerHTML);
});

<ul>
  <li class="1-li normal"><a href="#"><img src="#"></a></li>
  <li class="2-li normal"><a href="#"><img src="#"></a></li>
  <li class="3-li normal"><a href="#"><img src="#"></a></li>
  <li class="4-li normal"><a href="#"><img src="#"></a></li>
  <li class="5-li normal"><a href="#"><img src="#"></a></li>
</ul>

使用jQuery：

var strintg_value = 'a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg',
    arr = strintg_value.split('*');

$('ul li').each(function (index, el) {
  var subArr = arr[index].split('+');
  $(el)
    .find('a').attr('href', subArr[0])
    .find('img').attr('src', subArr[1]);      
  console.log(el.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="1-li normal"><a href="#"><img src="#"></a></li>
  <li class="2-li normal"><a href="#"><img src="#"></a></li>
  <li class="3-li normal"><a href="#"><img src="#"></a></li>
  <li class="4-li normal"><a href="#"><img src="#"></a></li>
  <li class="5-li normal"><a href="#"><img src="#"></a></li>
</ul>

Answer 7

//var string = 'a.html+a.jpeg*b.html+b.jpeg*c.html+c.jpeg*d.html+d.jpeg*e.html+e.jpeg';
var strintg_value="http://www.martinique.org/sites/martinique/files/plage_du_diamant_v1240_0.jpg*http://www.ajaccio-tourisme.com/sites/otajaccio/files/blocmusee_0.jpg*http://www.ajaccio-tourisme.com/sites/otajaccio/files/Cit%C3%A9-Imp%C3%A9riale.jpg*http://www.ajaccio-tourisme.com/sites/otajaccio/files/Pays-d%E2%80%99Ajaccio.jpg*http://www.ajaccio-tourisme.com/sites/otajaccio/files/Environnement.jpg";

var images = $("img[src='#']");
var url = strintg_value.split("*");
//for or objImg.each(function(index){ this.src = url[index] }
for(var n=0; n < images.length; n++){
  images[n].src = url[n];
  images[n].style = "border:solid 10px black";
}

img{width:50px; height:50px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="1-li normal"><a href="#"><img src="#"></a></li>
<li class="2-li normal"><a href="#"><img src="#"></a></li>
<li class="3-li normal"><a href="#"><img src="#"></a></li>
<li class="4-li normal"><a href="#"><img src="#"></a></li>
<li class="5-li normal"><a href="#"><img src="#"></a></li>

字符串到数组并在jquery中获取单个值

7 个答案: