CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
Chelseawillrecover
Chelseawillrecover

Reputation: 2644

Wrap each list array in a Tag

I am trying to get each Post lists wrapped in the href so it can be clicked on. Basically when I try to click on each Posts, it does not work until I hover my mouse close to the top of each posts before it works.

Below is my code and also an image of what I mean:

JS:

function getPosts(data) {
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {   
        $('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).appendTo($output);
        if ( i == 3 ) return false;
       // return (postlimit-- > 1);
    });
    $('#postlist').empty().append($output);
}

function showPost(id) {
    $('#mypost').html('<span class="img_spin">Loading post...</span>');
    $.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        var posts='';
        posts += '<h3>' + data.post.title + '</h3>';
        posts += data.post.content;
        $('#mypost').html(posts);
    });
}

Image: enter image description here

If you look at the image, when i hover my mouse close to the top edge of the Post, then the URL at the bottom shows and that works but any where else does not work.

Upvotes: 2

Views: 1562

Answers (2)

andyb
andyb

Reputation: 43823

From looking at the Chrome Elements tab in this demo the JavaScript is generating invalid HTML because of mismatched closing elements.

Using an example posts of var posts = { "posts" : [ {"id":"1", "title":"lorem", "excerpt":"foo"}, {"id":"2", "title":"ipsum", "excerpt":"bar"} ] }

This '<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>' is resulting in the broken first child of the following <li>:

<li>
    <a href="#devotionpost" onclick="showPost(1)" < a></a>
    <h3>lorem</h3>
    <p>foo</p>
</li>

Depending on exactly what you want to wrap in the anchor element, you could just build the post <li> like in this updated demo or see code below:

$.each(data.posts,function(i, val) {
    $output.append('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></a></li>');
});

Or if you want to have a little less string concatenation, you could use .wrapInner()

$.each(data.posts,function(i, val) {
    var $post = $('<li><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></li>');
    $post.wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

Or keeping your .append() approach:

$.each(data.posts,function(i, val) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

Note: The string concatenation approach, combined with a single .append() is the best performing code.

Upvotes: 1

Alexander Taran
Alexander Taran

Reputation: 6725

By the looks of it, your lists are floating. You should use a clearfix technique to make "A" element box include the list. You also should know that by standard "A" elements are not allowed to contain block elements and as far as internet explorer 9 (didn't check in 10 or 11) "A" will not work the way you intended.

Possible workaround:
<div style="position:relative">
<ul>
<li></li>
<ul>
<a style="position:absolute;display:block;top:0;bottom:0;left:0:right:0;" href="#"></a>
<div>

Upvotes: 0

Related Questions