1

I know this is simple one . But i get confused . That's why i posted here .

Please see my html structure

<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>

and i have a string in javascript 

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

here i can split the strintg_value using * make it as array so

   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";

and at the end i need to give appropriate value for a href and img src like this

<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>

please help to solve this.

I tried this one strintg_value=strintg_value.split('*'); after that i don't know how to execute the rest .Please help .

Improve this question
5
  • What code have you tried? split()ting the string sounds like a good first step, please show us your attempt. Commented Sep 4, 2017 at 12:33
  • 1
    Careful when doing this : strintg_value=strintg_value.split('*'); Keep your strintg_value a string and declare a new variable for your array. Commented Sep 4, 2017 at 12:42
  • I agree, because you transform a string into an array, very bad practice. Commented Sep 4, 2017 at 12:42
  • ok. Then please give another solution . Commented Sep 4, 2017 at 12:44
  • 1
    I gave you one. Declare a new variable and store strintg_value.split('*'); in it. Commented Sep 4, 2017 at 12:48

7 Answers 7

Reset to default
3

You have to re-use split and split the values into arrays again. And then use this arrays to fill your html elements with a loop.

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

ES6 version :

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>

Improve this answer

Comments

1

Split the string, then map and split each entry to get the link and the img src separated. Then you can just loop over the lis and set the attributes on the a and img:

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]);
}
<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>

Improve this answer

Comments

1

you could use map after the split:

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]
      };
    });

This would make the array formatted an array of objects with link and src attributes.

Improve this answer

Comments

1

First, use strintg_value.split('*'); to turn the string into an array

Second, you can loop through each li element and apply the correct strintg_value value by using i to get the index.

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>

Improve this answer

Comments

1

You can use String.prototype.split() once to split by * and than, loop over all the elements document.querySelectorAll('ul li') with Array.prototype.forEach() and use the element index to split again but this time by + and from current element use document.querySelector() to query the a element and the img to make the proper update..

Code:

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>

With 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>

Improve this answer

Comments

1 

//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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.