Get Value From input and replace

Question

i have many a href tags and also i have input with type hidden. i wrote a code to get the value of closest input to each a href then put the value of that input instead of data-page and the text of the a tag. i wrote the below code but it is not work.

$(document).ready(function(){
   $(".PageNumber").each(function(index, element) {
    var pagenum = $(this).closest('.page').val();  
    var linkk = $(this).attr("data-page");
	var linktext = $(this).text();
    $(this).attr(pagenum);
	$(this).text(pagenum);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="PageNumber" data-page="" data-href="home.htm">1</a> 
<input type="hidden" value="1" class="page"/> 
<a class="PageNumber" data-page="" data-href="home2.htm">1</a> 
<input type="hidden" value="2" class="page"/> 
<a class="PageNumber" data-page="" data-href="home3.htm">1</a> 
<input type="hidden" value="3" class="page"/>

jQuery.closest does not work as you expected. It doesn't search through element siblings. — MysterX
– MysterX, Commented Aug 7, 2017 at 8:40
You better use the jQuery.next() function to get the next input. — Bellian
– Bellian, Commented Aug 7, 2017 at 8:41

Marco Salerno · Accepted Answer · 2017-08-07 08:59:09Z

1

This is what you want to do in the clearest way ^^

$(document).ready(function(){
   $(".PageNumber").each(function(index, element) {
    var pagenum = $(this).next('.page').val();  
    $(this).attr("data-page", pagenum);
    $(this).text(pagenum);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="PageNumber" data-page="" data-href="home.htm">1</a> 
<input type="hidden" value="1" class="page"/> 
<a class="PageNumber" data-page="" data-href="home2.htm">1</a> 
<input type="hidden" value="2" class="page"/> 
<a class="PageNumber" data-page="" data-href="home3.htm">1</a> 
<input type="hidden" value="3" class="page"/>

answered Aug 7, 2017 at 8:59

Marco Salerno

5,1912 gold badges14 silver badges32 bronze badges

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

1 Comment

Marco Salerno Over a year ago

np, i like to help

Milan Chheda · Accepted Answer · 2017-08-07 08:51:04Z

0

jQuery.closest() is not what you want. this function will find the closest parent element that matches the selector, starting with the current element. https://api.jquery.com/closest/

You better use the jQuery.next() function to get the next input. https://api.jquery.com/next/

$(document).ready(function() {
  $(".PageNumber").each(function(index, element) {
    var pagenum = $(this).next('.page').val();
    var linkk = $(this).attr("data-page");
    var linktext = $(this).text();
    $(this).attr(pagenum);
    $(this).text(pagenum);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="PageNumber" data-page="" data-href="home.htm">1</a>
<input type="hidden" value="1" class="page" />
<a class="PageNumber" data-page="" data-href="home2.htm">1</a>
<input type="hidden" value="2" class="page" />
<a class="PageNumber" data-page="" data-href="home3.htm">1</a>
<input type="hidden" value="3" class="page" />

edited Aug 7, 2017 at 8:51

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Aug 7, 2017 at 8:42

Bellian

2,16016 silver badges23 bronze badges

2 Comments

inaz Over a year ago

how can i set the value to data-page too?

Bellian Over a year ago

jQuery.attr() is used to get and set attributes. jQuery.attr('data-page') will get the attribute and jQuery.attr('data-page', value) will set the attribute. You can also use the jQuery.data() function. api.jquery.com/data

Titus · Accepted Answer · 2017-08-07 08:52:45Z

0

The jQuery closest function doesn't do what you need it to do. Here is its description.

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

You could use next to get the input, here is an example:

$(document).ready(function(){
   $(".PageNumber").each(function(index, element) {
    var pagenum = $(this).next('.page').val();
    $(this).data("page", pagenum)
    $(this).text(pagenum);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="PageNumber" data-page="" data-href="home.htm">1</a> 
<input type="hidden" value="1" class="page"/> 
<a class="PageNumber" data-page="" data-href="home2.htm">1</a> 
<input type="hidden" value="2" class="page"/> 
<a class="PageNumber" data-page="" data-href="home3.htm">1</a> 
<input type="hidden" value="3" class="page"/>

edited Aug 7, 2017 at 8:52

answered Aug 7, 2017 at 8:46

Titus

22.6k1 gold badge26 silver badges36 bronze badges

3 Comments

inaz Over a year ago

how can i set the value to data-page too?

inaz Over a year ago

your editet answer is not replace with value of input for each data-href

Titus Over a year ago

@Inaz I'm not sure what you mean, if you want to change the a element's data-href property you can do the same thing as I've done for the data-page property.

Collectives™ on Stack Overflow

Get Value From input and replace

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related