how to get (id) and add (href) by jquery?

Question

how to get Numbers (data-id) in text(id) and Numbers (data-id) in text (target) and add for button by (href)

HTML

<span id='a' data-id='111'>id</span>
<span id='a' data-id='321'>target</span>
<button id='send'>send</button>
<br>
<span id='a' data-id='456'>id</span>
<span id='a' data-id='234'>target</span>
<button id='send'>send</button>
</br>
<span id='a' data-id='321'>id</span>
<span id='a' data-id='234'>target</span>
<button id='send'>send</button>
</br>
<span id='a' data-id='213'>id</span>
<span id='a' data-id='123'>target</span>
<button id='send'>send</button>

i use this but Error ? jquery

   $("#a:even").each(function(){
   var b = $(this).attr("data-id");
   });

   $("#a:odd").each(function(){
   var c = $(this).attr("data-id");
   });

   var d = "http://fde&id="+b+"hve&target="+c+";
   $("#send").each(function(){
    $(this).attr("href",d);
    });

but ERROR ? how ?

i want like this

<span id='a' data-id='111'>id</span>
<span id='a' data-id='321'>target</span>
<button id='send' href='http://fde&id=111&hve&target=321'>send</button>
<br>
<span id='a' data-id='456'>id</span>
<span id='a' data-id='234'>target</span>
<button id='send' href='http://fde&id=456&hve&target=234'>send</button>
</br>
<span id='a' data-id='321'>id</span>
<span id='a' data-id='234'>target</span>
<button id='send' href='http://fde&id=321&hve&target=234'>send</button>
</br>
<span id='a' data-id='213'>id</span>
<span id='a' data-id='123'>target</span>
<button id='send' href='http://fde&id=213&hve&target=123'>send</button>

and thanks !!

IDs have to be unique; and you are using the same IDs such as "a" and "send" for multiple elements. — Terry, Sep 01 '14 at 01:15
Your code shows a complete lack of understanding of html. If you learn about the difference between id and class you will be able to answer your own question. — JK., Sep 01 '14 at 02:14

score 0 · Accepted Answer · answered Sep 01 '14 at 01:35

Well try this javascript code instead

$('.send').each(function(){
        var id1 = $(this).prev('.a').attr('data-id');
        var id2 = $(this).prev('.a').prev('.a').attr('data-id');
        $(this).attr('href', 'http://fde&id='+id2+'&target='+id1);
}

Hope this will help you and remove all your previous code. Replace your IDs with CLASS too

Nick Coad · Answer 2 · 2014-09-01T02:24:22.620

0

First things first: here is a JSFiddle that does what you're after: http://jsfiddle.net/ftvLkhqg/

But I should mention there are several things fundamentally wrong with your approach that you should consider changing.

IDs must be unique. You have reused the same ID many times in your HTML, you need to consider using "classes" instead (class="a").
'href' is not a valid attribute on a button element. You are setting the href attribute for the button element, but this is not a valid usage. Consider using a link (<a href=""></a>) instead.
Be careful with loop logic. Your loops are done incorrectly. You've looped through the elements for setting variables 'b' and 'c' before you get to the line where you set the variable 'd'. Due to JavaScript's asynchronous nature you could wind up with any value for 'b' and 'c' at the point where 'd' is set, and 'd' will only be set once. You would wind up with the same URL being set for every button, if it worked at all.
The correct tag to use is <br/> or <br>. Not </br>.

With this in mind, here's a second JSFiddle showing how I might have tackled the same scenario. http://jsfiddle.net/bqgesjjb/3/

edited Sep 01 '14 at 02:24

answered Sep 01 '14 at 01:40

Nick Coad

3,623
4
30
63

point 2 : "`href` is not a valid attribute on a button element" , but your fiddle why you still use `href` attribute on button? I think should use custom attribute (e.g `data-href`) and if want get open location when a button is clicked, it can use `window.open()` with `_self` target. http://jsfiddle.net/L1u7wegL/ – rails_id Sep 01 '14 at 02:02
@anonymousxxx I had actually changed it to `` but looks like it didn't stick. I've fixed it now. I think your suggestion of using `data-href` is seriously misguided. You're trying to create a bit of text that, when clicked, opens a URL in the current window. That already exists and it's called the `` element. There's no need to reinvent the wheel here. – Nick Coad Sep 01 '14 at 02:24
I think use custom attribute `data-href` instead attribute `href` on `button` tag is not misguided. I suggest to use it because OP using `button` tag. – rails_id Sep 01 '14 at 03:29
@anonymousxxx you've missed the point, let me put it this way: why *wouldn't* you use an `` tag with a `href` attribute for this? What is the purpose of avoiding this semantically correct existing solution? – Nick Coad Sep 01 '14 at 03:36
1. Because I don't know a reason why OP use button, do you know why OP use `button` tag? If OP have another function and selector use `button`, should OP change all selector javascript with `a`? – rails_id Sep 01 '14 at 04:07
2. **"why wouldn't you use an tag with a href attribute for this?"** When javascript is crash or browser's user have disable javascript, it will make `` like a text (placehorlde hyperlink). And your statement about this **" Consider using a link (``)** you can read this discussion http://stackoverflow.com/questions/5292343/is-an-anchor-tag-without-the-href-attribute-safe – rails_id Sep 01 '14 at 04:08
1. We're supposed to answer based on the information in the OP. The OP shows no reason why `` would not be suitable. 2. If JavaScript is not working then the ` – Nick Coad Sep 02 '14 at 05:05

how to get (id) and add (href) by jquery?

2 Answers2