Menu
hi i have some problem about logic of loop
have a few elements
<div place="1" area="Text 1" class="element"></div>
<div place="2" area="Text 2" class="element"></div>
<div place="3" area="Text 3" class="element"></div>
and
<span place="1"></span>
<span place="2"></span>
<span place="3"></span>
and i want to insert all div elements area attribute value to span element which place are the same
like this
<span place="1">Text 1</span>
<span place="2">Text 2</span>
<span place="3">Text 3</span>
883
A function to execute for each matched element. The .each () method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0.
And the later ($.each ()) loops or iterates through jQuery objects or arrays. We’ll see both the functions in action here. Here I have four <span> elements on my web page and each has a character in it.
When we need to find a single and unique element at that time we can use jQuery get by element id. JQuery uses attr () method to find out the id of an element. The get by element id is a faster method because it directly calls the JavaScript engine.
You can stop the loop from within the callback function by returning false. Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the.each () method: 1
Firstly note that creating your own non-standard attributes in your HTML can lead to some odd behaviour. It's much better practice to use data attributes to store any custom metadata with an element.
To fix your actual issue, you need to loop through all the div elements, then select the span with the related place and set its text(), like this:
$('.element').each(function() {
$('span[data-place="' + $(this).data('place') + '"]').text($(this).data('area'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-place="1" data-area="Text 1" class="element"></div>
<div data-place="2" data-area="Text 2" class="element"></div>
<div data-place="3" data-area="Text 3" class="element"></div>
<span data-place="1"></span>
<span data-place="2"></span>
<span data-place="3"></span>Note the use of data-* attributes in the example.
133
See below answer using jQuery
$(document).ready(function(){
$("div[place]").each(function(i,el){
$("span[place='"+$(this).attr("place")+"']").html($(this).attr("area"));
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div place="1" area="Text 1" class="element"></div>
<div place="2" area="Text 2" class="element"></div>
<div place="3" area="Text 3" class="element"></div>
<span place="1"></span>
<span place="2"></span>
<span place="3"></span>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
