jquery cdoe why only available for first item?

Question

I use this code.

I need click a area to select the username to insert

$('#r_user').click(function(){ 
    $('#reply_comment_textarea').val($('#reply_comment_textarea').val()+$(this).attr('alt')); 
});

<li id="r_user" alt="@tommy ">...something</li>

I planing the user is click the li area...

will get the alt content insert to the textarea (#reply_comment_textarea)

the page will be have many li#r_user and textarea#reply_comment_textarea

eg...

<li id="r_user" alt="@tommy ">...something</li>
<li id="r_user" alt="@peter ">...something</li>
<li id="r_user" alt="@kate ">...something</li>
<textarea id="reply_comment_textarea"></textarea>


<li id="r_user" alt="@tom ">...something</li>
<li id="r_user" alt="@tony ">...something</li>
<textarea id="reply_comment_textarea"></textarea>


<li id="r_user" alt="@tommy ">...something</li>
<textarea id="reply_comment_textarea"></textarea>

how can I click the li#r_user will be insert the alt content to next #reply_comment_textarea

Now mycode only available for the first li tag?

If you want to have identical values, you ***have*** to use classes, **not** IDs. — ArtOfCode, Aug 22 '14 at 19:59
Stemming off what @WilfredoP said, you should be using classes, not IDs. Classes allow you to apply styling and JavaScript to multiple DOM elements, whereas IDs allow you to apply them to just one. — jrad, Aug 22 '14 at 20:00
OH..ok now.But if I click the li area will be insert the all textarea — Sky, Aug 22 '14 at 20:01
RE: using unique ids [Can an html element have multiple ids?](http://stackoverflow.com/a/192066/3033053) — disappointed in SO leadership, Aug 22 '14 at 20:05
@Barmar That was a joke. It is working because jQuery will use query selector, but I think the comment are enough clear about the multiple id thing ;) — Karl-André Gagnon, Aug 22 '14 at 20:07

Barmar · Accepted Answer · 2014-08-22T20:09:26.650

1

IDs are supposed to be unique, and a selector that requests an ID will only return the first one. Use a class instead.

Change your HTML to:

<li class="r_user" alt="@tommy ">...something</li>
<li class="r_user" alt="@peter ">...something</li>
<li class="r_user" alt="@kate ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tom ">...something</li>
<li class="r_user" alt="@tony ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tommy ">...something</li>
<textarea class="reply_comment_textarea"></textarea>

and change your JS to:

$('.r_user').click(function(){
    var alt = $(this).attr('alt');
    $(this).nextAll('.reply_comment_textarea').first().val(function(i, oldval) {
        return oldval + alt;
    });
});

DEMO

$(this).nextAll('reply_comment_textara') selects all of the textareas after the element you clicked on. Then .first() picks the first one, so the click will just update the textarea just below the one you clicked on.

Also, you should not use your own custom attributes; alt is not a standard attribute for li elements. To store application-specific data in DOM elements, use data-XXX attributes, e.g. data-alt="@tommy ", these are specifically reserved for application use. In jQuery, you can access this with .data(), e.g. $(this).data('alt').

edited Aug 22 '14 at 20:09

answered Aug 22 '14 at 20:02

Barmar

741,623
53
500
612

thanks, but if I use this code will be insert the all textarea,If change your code not work? $('.r_user').click(function(){ $('.reply_comment_textarea').val($('.reply_comment_textarea').val()+$(this).attr‌('alt')); }); – Sky Aug 22 '14 at 20:07
That's because `$('.reply_comment_textarea')` selects all text areas. That's why I use `.nextAll().first()` to select the next one after the element you clicked on. – Barmar Aug 22 '14 at 20:08
I had a wrong argument to the `.val()` function, I've fixed it now. See the jsfiddle demo. – Barmar Aug 22 '14 at 20:09
Thanks for your demo ! and thank you tell me about data-XXX :) – Sky Aug 22 '14 at 20:11
Hi barmar, I test your code for use. but, I find a very interesting problem. Why just can use your html? if change my html why not work . my full code: http://jsfiddle.net/sky94132003/utj2vu2k/3/, the simple code: http://jsfiddle.net/sky94132003/utj2vu2k/4, all not work – Sky Aug 22 '14 at 20:44
`nextAll` only finds siblings. Since your `textarea` is not inside the `ul`, it isn't found. You need to use different `$(this).closest('ul').next().find('.comment')`. – Barmar Aug 22 '14 at 20:50
Wow, I got it. I'm a beginner of js. thanks alot for your help again. – Sky Aug 22 '14 at 20:56

score 0 · Answer 2 · answered Aug 22 '14 at 20:00

0

Change it to a class definition:

$('#r_user').click();

To

$('.r_user').click();
<li class="r_user"></li>

answered Aug 22 '14 at 20:00

beautifulcoder

10,832
3
19
29

score 0 · Answer 3 · answered Aug 22 '14 at 20:02

You can't use the same id for multiple elements. jQuery has now way to know what you are talking about. You can just attach to the click event of a control. Try this:

$('li').click(function(){ 
    $('#reply_comment_textarea').val(
        $('#reply_comment_textarea').val() +
        $(this).attr('alt')
    ); 
});

score 0 · Answer 4 · answered Aug 22 '14 at 20:03

Like said in the comments, IDs have to be unique in HTML. This is why jQuery is picking only the first of the LIs.

You can probably achieve what you want by using classes. I also don't understand why you have multiple textareas. Here is a revised version :

<ul>    
    <li class="r_user" alt="@tommy ">...something</li>
    <li class="r_user" alt="@peter ">...something</li>
    <li class="r_user" alt="@kate ">...something</li>
    <li class="r_user" alt="@tom ">...something</li>
    <li class="r_user" alt="@tony ">...something</li>
    <li class="r_user" alt="@tommy ">...something</li>
</ul>
<textarea id="reply_comment_textarea"></textarea>

Notice how I changed the id="r_user" to class="r_user". This way you can have multiple elements with the same class.

For the JS :

$('.r_user').click(function(){
    var value = $('#reply_comment_textarea').val() + $(this).attr('alt');
    $('#reply_comment_textarea').val(value);
});

Also, you should probably not add a click event on a LI element, it is nearly always better to use a A element in this case, but this is outside the scope of this answer.

jquery cdoe why only available for first item?

4 Answers4