some trouble for my jquery code

Question

I have some trouble in this code, I want to make a judge if the next().children() div hasn't lengh, then do an ajax require. But it always make an ajax require even the div has content.

Here is the html code:

<noscript>
<style>
.more{display:none;}
</style>
</noscript>
<!-- main content -->
<p class="click hidden" rel="12345">View more</p>
<div class="more">
    <h5>Relative post</h5>
    <div class="relative-post"></div>
    <!-- comment area -->
</div>
<!-- main content -->
<p class="click hidden" rel="23456">View more</p>
<div class="more">
    <h5>Relative post</h5>
    <div class="relative-post"></div>
    <!-- comment area -->
</div>

Here is the jquery code:

jQuery(document).ready(function(){
    $(".click").live('click',function() {
        if($(this).next('.more').is(':visible')){
            $(this).next('.more').css('display','none');
        }else{
            $(this).next('.more').css('display','block');
        }
        if($(this).next('.more').children('.relative-post:has(*)').length){
            }else{
            var $this = $(this);
            var item_id = $this.attr('rel');
            $.ajax({
                url: "process",
                dataType: "html",
                type: 'POST', 
                data: 'post=' + item_id, 
                cache: false,
                success: function(data){ 
                    $this.next('.more').children('.relative-post').html(data);
                }
            }); 
                    }
        }
    });
});

You can clean up your show/hide code by using jQuery toggle()... api.jquery.com/toggle — BZink
– BZink, Commented Aug 30, 2012 at 15:28

adeneo · Accepted Answer · 2012-08-30 15:35:46Z

1

$(function() {
    $(document).on('click', '.click', function() {
        var next = $(this).next('.more');
        next.toggle(!next.is(':visible'));

        if (next.children('.relative-post:empty').length) {
            var item_id = $(this).attr('rel');
            $.ajax({
                url: "process",
                dataType: "html",
                type: 'POST',
                data: {post: item_id},
                cache: false,
                success: function(data) {
                    next.children('.relative-post').html(data);
                }
            });
        }
    });
});

FIDDLE

answered Aug 30, 2012 at 15:35

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

adu Over a year ago

Instead of children you may want to use contents. I up-voted though.

adeneo Over a year ago

contents will get textnodes as well, but I don't see how I would use it here, as the :empty expression is what checks the element to see if it's empty, and that includes textnodes as well ?

Sumit Neema · Accepted Answer · 2012-08-30 15:31:31Z

0

Replace the code

if($(this).next('.more').children('.relative-post:has(*)').length)

with following

 if($(this).next('.more').children('.relative-post').html())

answered Aug 30, 2012 at 15:31

Sumit Neema

4803 silver badges18 bronze badges

Comments

Mark Rotteveel · Accepted Answer · 2024-12-08 12:59:43Z

0

if ($(this).next('.more').children('.relative-post').html().length){

edited Dec 8, 2024 at 12:59

Mark Rotteveel

110k241 gold badges160 silver badges233 bronze badges

answered Aug 30, 2012 at 15:28

mittmemo

2,0903 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

some trouble for my jquery code

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related