hide cell content if child spans are empty

问题

There is a table 'OfficeInfo' with two rows with 2 cell each. Each cell will have Office info like name, address, phone and direction link. I need to hide the direction link (google map link based on the address value) or hide the whole cell if other info like name, addreses, phone etc are blank..lets say everything else is empty, hide the 'map and directions' link as well or the whole cell...How to do in Jquery?

<table class="OfficeInfo" border="0" style="width: 100%" cellspacing="10px" cellpadding="15px">
    <tr>
        <td class="Office1" style="width=40%">  
            <span class="OfficeName">
                Munster Women&#39;s Center<br />
            </span>
            <span class="Address">
                1111 North Ronald Reagan Pkwy,  <br />&#160;Avon,IN 46123      
            </span> 
            <span class="Phone">
                (317) 342-1254</span><br />
            <a class="mapdirectionsLink" href="#">map &#38; directions&#62;</a>
            <br />
            <br />
            <span class="Hours">
                MTW: 9:00 AM- 5:00 PM 
            </span>
        </td>
        <td>
            <span class="OfficeName">  </span>
            <span class="Address"></span>                                     
            <span class="Phone"></span>
            <br />
            <a class="mapdirectionsLink" href="#">map and directions</a>
            <br />
            <br />
            <span class="Hours"></span> 
        </td>
    </tr>
    <tr>
        <td>
            Office3
        </td>
        <td>
            Office4
        </td>   
    </tr>
</table>

回答1:

As you don't include your final html it is tough to say. Always try and include what we will see on the page, not generic sharepoint calls.

http://jsfiddle.net/Ctjcv/7/

In this example I check whether each cell contains any children other than the map class. If not then we can safely hide it. You will see that cell1 shows the link because other data is present while cell 2 does not.

$('.OfficeInfo td').each( function() {
    if ($(this).children(':empty').not('.mapdirectionsLink, br').length > 0) {
        $(this).children('.mapdirectionsLink').hide();   
    }
});

回答2:

You can use text() method for that

$('.OfficeInfo tr td').each(function() {
    if ($(this).children().not('.mapdirectionsLink').text().replace(/^\s+|\s+$/g,"") == '') {
        $(this).children('.mapdirectionsLink').hide();
    }
});

You can find JSFiddle here

There is an extra trim control..

EDIT : I just add some extra to mrtsherman's solution..

EDIT 2 : I changed function to hide all elements if there is no map info JSFiddle here
If you want to remove the elements (not hiding) you can change

$(this).children('*').hide();

line with:

$(this).children('*').remove();

来源：https://stackoverflow.com/questions/8332055/hide-cell-content-if-child-spans-are-empty

标签

jquery

hyperlink

hide

cell