jquery: use “letters” as an id

Question

I'm building menu that will show a list of letters and than load the proper page according to what user has selected. I'm able to load one letter, but how could i use "letters" as an id so i don't need to duplicate the same jquery code for each letter.

<div id="idshow"><a id="hidelinks" href="#">Hide</a> <br /><br /></div>

<div id="letter_a"><a id="success_a" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" href="#">C Show</a></div>

<div id="loadpage"></div>


<script>
$("#idshow").hide();

$("#success_a").click(function () {

        $("#idshow").show();
        $("#letter").hide();


        $("#loadpage").load("letter_a.html", function(response, status, xhr) {
                if (status == "error") {var msg = "Sorry but there was an error: ";$("#error").html(msg + xhr.status + " " + xhr.statusText);}});
        });

        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
});

</script>

Answer 1

Add a class, add a data attribute,select all children from the container....

Just selecting all ids which start with a string is not possible! Well it is possible to just select a part of the id. See dystroy answer....

Code:

$('[id^="success"]').each(function() {
    debugger;
    $('body').append($(this).text());
    });​

Fiddle sample: http://jsfiddle.net/TwDmm/2/

Answer 2

You may use this :

 $('[id^="success"]').click(function () {
     // the letter is the last character of the id
     var letter = this.id.slice(-1); 
     ...
     $("#loadpage").load("letter_"+letter+".html" ...

Answer 3

I believe this is what you are looking for (minus the alert(...) part, that is just for show):

$("#idshow").hide();

$(".letterLink").click(function () {

        $("#idshow").show();
        $("#letter").hide();

var url = $(this).attr('id') + ".html";
 alert("loading " + url);   

        $("#loadpage").load(url, function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }});
        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
        });
});

Here is the fiddle

​

Answer 4

I would suggest using letters as a class.

You can then do a select on

$(".letters").click(function(){
   // You then access the clicked object via $(this).

});

Answer 5

This is what I would do, using data attributes:

<div id="letters">
    <div><a data-letter="a" href="#">A Show</a></div>
    <div><a data-letter="b" href="#">B Show</a></div>
    <div><a data-letter="c" href="#">C Show</a></div>
</div>

JS:

$('.letters').on('click','a[data-letter]',function() {
    var selectedLetter = $(this).data('letter');
    //rest of code here
});

You have access to the selected letetr in the selectedLetter var. This is also more efficient than some of the other solutions, because it only attaches one event handler, instead of an individual event handler for every single letter.

Answer 6

Giving the the letters a class (for instance .letter) might be a solution. You could hide all letters by hiding .letter and show one by specifically targetting its id. The function should therefore be $('.letter').click(function(){});