jQuery selector syntax question

Question

Here is my html:

<form>
    <dl>
        <dt>&nbsp;</dt>
        <dd><input type="hidden"></dd>

        <dt>Dont hide this one</dt>
        <dd><input type="text"></dd>
    </dl>
</form>

I'm using jQuery to hide the dt/dd elements where the input type is hidden with this code:

$("input[type=hidden]").each(function() {
    $(this).parent().hide().prev().hide();
});

But I also only want to apply this to dts where the text is  . How can I do this sort of select?

Update: Maybe I need to clarify: A few people have posted answers where it hides the dd before checking if the content of the dt is also  . Both conditions must be true before hiding both the dt and dd.

Final Solution: Here's what I ended up with:

$('input[type=hidden]').filter(function() {
    return $(this).closest('dd').prev('dt').html() === '&nbsp;';
}).each(function() {
    $(this).closest('dd').hide()
           .prev('dt').hide();
});

Community · Accepted Answer · 2017-05-23 10:33:02Z

3

$("input[type=hidden]").filter(function() {
    return $(this).parent().prev('dt').html() === "&nbsp;";
}).each(function() {
    $(this).parent().hide().prev().hide();
});

This will not select <dt>foo bar</dt>

which contains(' ') would.

More concisely (with credit to Emil's answer)

$("input[type=hidden]").filter(function() {
    return $(this).closest('dd').prev('dt').html() === "&nbsp;";
}).closest('dd').hide().prev('dt').hide();

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Dec 9, 2009 at 18:27

cobbal

70.9k20 gold badges146 silver badges159 bronze badges

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

3 Comments

Skawful Over a year ago

As people have already reposted answers... and I can't comment yet cobbal's code is missing this: $("input[type=hidden]").each(function() { $(this).parent().hide().prev().filter(function() { return $(this).html() === " "; }).hide(); }); return

Andrew Over a year ago

this doesn't work. it hides the dd before checking if the content of the dt is also  . Both conditions must be true before hiding both the dt and dd.

cobbal Over a year ago

Sorry, misunderstood what you were trying to do. Updated now

Scharrels · Accepted Answer · 2009-12-09 18:25:08Z

1

Use the contains selector:

$("dt:contains(' ')").hide();

answered Dec 9, 2009 at 18:25

Scharrels

3,06526 silver badges31 bronze badges

Comments

Emil Ivanov · Accepted Answer · 2009-12-09 18:26:55Z

1

$("input[type=hidden]").each(function() {
    $(this).closest('dd').hide()
           .prev('dt').hide();
});

This code finds the closest parent of the input with tag dd, hides it, then looks for a dt sibling and hides it as well.

answered Dec 9, 2009 at 18:26

Emil Ivanov

37.8k12 gold badges78 silver badges92 bronze badges

Comments

Jeff Sternal · Accepted Answer · 2009-12-09 21:10:45Z

0

This also does the trick (adapted from an earlier version of cobbal's answer):

$("input[type=hidden]").each(function() {
    if ($(this).parent().prev().filter(function() {
        return $(this).html() === "&nbsp;";
    }).hide().length > 0) {
        $(this).hide();
    }
});

edited Dec 9, 2009 at 21:10

answered Dec 9, 2009 at 19:13

Jeff Sternal

48.8k9 gold badges97 silver badges121 bronze badges

1 Comment

cobbal Over a year ago

I don't think an empty jQuery set evaluates to false, wouldn't the if statement always execute?

eflorico · Accepted Answer · 2009-12-10 10:58:48Z

0

The contains selector doesn't match the whole content, so it might work for you, but is not an ideal solution. The correct way to do this is to use the filter function:

$('input[type=hidden]').filter(function() {
   return $(this).prev().html() == '&nbsp;'
})
.each(function() {
   $(this).hide();
   $(this).prev().hide();
});

edited Dec 10, 2009 at 10:58

answered Dec 9, 2009 at 18:33

eflorico

3,6392 gold badges33 silver badges41 bronze badges

2 Comments

Andrew Over a year ago

this doesn't work. it end up hiding the entire dl. I am only trying to hide the dt and dd where the dt contains   and the dd contains a hidden form element.

eflorico Over a year ago

Oh, I didn't unterstand the question correct, I'm sorry. I changed the code now.

Collectives™ on Stack Overflow

jQuery selector syntax question

5 Answers 5

3 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related