Using custom selectors in Jquery

Question

My code programmically creates <span> nodes with a custom ID. I am trying to access a specific one using Jquery but it doesn't want to work for me.

the html:

 <div id="container">
    <div id="header">
        <span id="menu">
        </span>
        <center></center>
        <span id="refresh" runat="server">
        </span>
    </div>
    <div id="content" runat="server">
    <ul id="list" runat="server"></ul>
    </div>
    <div id="article" runat="server">
    </div>
</div>

the jquery:

$(document).ready(function () {
    $("a").click(function () {
        var post = $(this).data('postid'); //this works and returns the postID selected.
        $('#list').slideUp(); //this hides all the anchor tags
        $('#' + 'post' + post).show(); //This is what is not working
    });
});

the .net c#

    foreach (SyndicationItem item in feed.Items)
    {
        subject[count] = item.Title.Text;
        date[count] = item.PublishDate.DateTime.ToString();

        summary[count] = item.Summary.Text;
        list.InnerHtml += "<a href=\"#\" data-postid=\"" + count +"\"><li id=\"post" + count + "\"><span id=\"bold\">" + subject[count] + "</span><br>" +
           "<span id=\"posted-date\">Posted on: " + date[count] + "</span></li></a>";
        article.InnerHtml += "<span style=\"display: none;\" class=\"post\" id=\"post" + count + "\">" + summary[count] + "</span><br>";
        count++; 
    }

Pretty much when I click one of the anchor nodes, it grabs the postID and hides the list of anchor tags I have and is suppose to display(un-hide) the post that has the postID.

Please let me know if u need any more information.

if you add alert("post = " + post); at line 4 do you get what you are expecting? — Annabel
– Annabel, Commented May 17, 2013 at 16:19
Even though not related, your html is invalid you should use custom attributes prefixed with data-* and you can access it as $(this).data('postID') — PSL
– PSL, Commented May 17, 2013 at 16:23
I think you should try to avoid the use of custom attributes like postID.What if someday html introduces an attribute with the same name?? Instead you should use data-ATTR_NAME. You can take a look at this link — mario595
– mario595, Commented May 17, 2013 at 16:24
@Luca Can you edit your question and provide the full markup? — billyonecan
– billyonecan, Commented May 17, 2013 at 16:28

billyonecan · Accepted Answer · 2013-05-17 16:43:19Z

3

You can't duplicate element id's. Your <span> and <li> elements both use the id "post" + count, when you call .show() it'll only grab the first element matching this id, in this case the <li>

answered May 17, 2013 at 16:43

billyonecan

20.3k9 gold badges45 silver badges66 bronze badges

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

Comments

dersvenhesse · Accepted Answer · 2013-05-17 16:47:13Z

3

Your ids aren't unique.

You've got <li id=\"post" + count + "\"> and <span style=\"display: none;\" class=\"post\" id=\"post" + count + "\">". Which will return something like <li id="post42"> and <span style="display: none;" class="post" id="post42"> where an id is used twice.

Make sure to use unique ids and the show() method will work.

edited May 17, 2013 at 16:47

answered May 17, 2013 at 16:42

dersvenhesse

6,4742 gold badges35 silver badges55 bronze badges

Comments

Matanya · Accepted Answer · 2013-05-17 16:42:31Z

Pretty much when I click one of the anchor nodes, it grabs the postID and hides the list of anchor tags I have and is suppose to display(un-hide) the post that has the postID.

Assuming the posts links are ordered the same as the posts themselves, do you really need the post ID? how about the following refactoring:

// The posts links

<ul class="posts_list"> 
    <li>Post Number 1 title</li>
    <li>Post Number 2 title</li>
    <li>Post Number 3 title</li>
    <li>Post Number 4 title</li>
</ul>


// the full posts

<ul class="posts"> 
    <li>Post number 1. bla bla bla</li>
    <li>Post number 2. bla bla bla</li>
    <li>Post number 3. bla bla bla</li>
    <li>Post number 4. bla bla bla</li>
</ul>

JQuery:

posts = $(".posts>li");

$(".posts_list").find("li").click(function(){

index = $("li").index(this);

posts.hide();
posts.eq(index).show();

});

JS Bin

Collectives™ on Stack Overflow

Using custom selectors in Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related