CODEWITHSUNDEEP
javascriptjquery
Abilash Erikson
Abilash Erikson

Reputation: 351

String to array and take individual value in jquery

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 .

Upvotes: 1

Views: 105

Answers (7)

user8556290
user8556290

Reputation: 

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

Upvotes: 1

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

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>

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26360

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>

Upvotes: 2

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 1

Niles Tanner
Niles Tanner

Reputation: 4021

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.

Upvotes: 1

baao
baao

Reputation: 73231

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>

Upvotes: 1

Magus
Magus

Reputation: 15104

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>

Upvotes: 3

Related Questions