I’m downloading ID from localStorage.getItem(1,22,3,14….). I want every single ID to be executed in jQuery (if it exists on the website). I can execute the code for one ID, but I don’t know what to do to make each ID after the decimal point executed. I try so but it doesn’t pass. I have to loop it, right? can anyone help?
JavaScript
x
7
1
var data = "1,22,3,14";
2
var format_id = data.replace(",", "");
3
console.log('id=' +format_id);
4
5
$("#"+format_id+" .plus").removeClass("plus");
6
$("#"+format_id+" .1").css("color", "red");
7
$("#"+format_id+" .1").css("font-weight", "bold");
JavaScript
1
18
18
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div id="1" class="idkom1">
3
<a class="punkt plus" href="#">
4
<div class="1">plus1 <i class="fa fa-arrow-alt-circle-up"></i></div>
5
</a>
6
</div>
7
8
<div id="2" class="idkom2">
9
<a class="punkt plus" href="#">
10
<div class="1">plusid2 <i class="fa fa-arrow-alt-circle-up"></i></div>
11
</a>
12
</div>
13
14
<div id="3" class="idkom3">
15
<a class="punkt plus" href="#">
16
<div class="1">plusid3 <i class="fa fa-arrow-alt-circle-up"></i></div>
17
</a>
18
</div>
Advertisement
Answer
- Split your string into an array using the
split
function. - Loop through your ids and process each id in turn.
JavaScript
1
8
1
var data = "1,22,3,14";
2
let ids = data.split(",");
3
4
for(let id of ids)
5
{
6
$("#"+id + " .plus").removeClass("plus");
7
$("#"+id + " .1").css({"color" : "red", "font-weight": "bold"});
8
}
JavaScript
1
18
18
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div id="1" class="idkom1">
3
<a class="punkt plus" href="#">
4
<div class="1">plus1 <i class="fa fa-arrow-alt-circle-up"></i></div>
5
</a>
6
</div>
7
8
<div id="2" class="idkom2">
9
<a class="punkt plus" href="#">
10
<div class="1">plusid2 <i class="fa fa-arrow-alt-circle-up"></i></div>
11
</a>
12
</div>
13
14
<div id="3" class="idkom3">
15
<a class="punkt plus" href="#">
16
<div class="1">plusid3 <i class="fa fa-arrow-alt-circle-up"></i></div>
17
</a>
18
</div>
Alternative version using a css class
JavaScript
1
8
1
var data = "1,22,3,14";
2
let ids = data.split(",");
3
4
for(let id of ids)
5
{
6
$("#"+id + " .plus").removeClass("plus");
7
$("#"+id + " .1").addClass("highlight");
8
}
JavaScript
1
5
1
div.highlight
2
{
3
color : red;
4
font-weight: bold;
5
}
JavaScript
1
18
18
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div id="1" class="idkom1">
3
<a class="punkt plus" href="#">
4
<div class="1">plus1 <i class="fa fa-arrow-alt-circle-up"></i></div>
5
</a>
6
</div>
7
8
<div id="2" class="idkom2">
9
<a class="punkt plus" href="#">
10
<div class="1">plusid2 <i class="fa fa-arrow-alt-circle-up"></i></div>
11
</a>
12
</div>
13
14
<div id="3" class="idkom3">
15
<a class="punkt plus" href="#">
16
<div class="1">plusid3 <i class="fa fa-arrow-alt-circle-up"></i></div>
17
</a>
18
</div>