CODEWITHSUNDEEP
jqueryjquery-selectors
Andrew
Andrew

Reputation: 239197

jQuery selector syntax 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 &nbsp;. 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 &nbsp;. 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();
});

Upvotes: 1

Views: 897

Answers (5)

eflorico
eflorico

Reputation: 3629

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();
});

Upvotes: 0

Jeff Sternal
Jeff Sternal

Reputation: 48675

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();
    }
});

Upvotes: 0

cobbal
cobbal

Reputation: 70805

$("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&nbsp;bar</dt>

which contains('&nbsp;') 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();

Upvotes: 3

Emil Ivanov
Emil Ivanov

Reputation: 37673

$("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.

Upvotes: 1

Scharrels
Scharrels

Reputation: 3065

Use the contains selector:

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

Upvotes: 1

Related Questions