2

これを理解できないようです、私はここで愚かな何かを逃しているように感じます...

jsFiddleデモ

基本的に、削除リンクにカーソルを合わせると、その行にあるテキストを除いて、その行のすべてのテキストにラインスルーを実行しようとしています。<td><a class="remove">

基本的なhtml構造は次のとおりです。

<tr>
    <td>Lorem ipsum text here</td>
    <td>01/01/2012</td>
    <!-- all <td>'s except for the Remove one should get a line-through -->
    <td><a class="remove">Remove</a></td>
</tr>

jQuery：

$('tr').on({
    'mouseover' : function () {
        $(this).closest('tr').find('td').filter(function () {
            var $childElems = $(this).children();

            // I can see the <a class="remove"> in .children()
            // But for some reason can't just test (hey there's an <a>, 
            // then don't apply this)

            if ($childElems.find('a').length <= 0) {
                return $(this).css('text-decoration', 'line-through');
            }
        });
    },
    'mouseout' : function () {
        $(this).closest('tr').find('td')
            .css('text-decoration', 'none');
    }
}, 'a.remove');
4

4 に答える 4

3

の中にはfilter()、this各td要素が順番にあります。これを呼び出すとchildren()、jQueryオブジェクトが返されます。これは、<a>その中<a>で別 のオブジェクトを検索しています<a>（これが、表示されない理由です）。

その代わり：

    $(this).closest('tr').find('td').filter(function () {
        if ($(this).children('a').length == 0) {
            return $(this).css('text-decoration', 'line-through');
        }
    });

...しかし、それは実際filterには設計されたものではありません。filter要素のセットを減らすために使用し、その結果を操作することになっています。

$(this).closest('tr').find('td').filter(function () {
    return !$(this).children('a').length;
}).css('text-decoration', 'line-through');
于 2013-03-20T15:35:09.627 に答える
3

CSSプロパティを直接操作せずに、そのためのクラスを使用した場合、これははるかに簡単になります。

trホバー時にそのクラスを要素に追加しtd、子孫セレクターを使用してフォーマットします。

tr.highlighted td { text-decoration:line-through; }
tr.highlighted td:last-child { text-decoration:none; }
于 2013-03-20T15:36:53.313 に答える
1 
$('tr').on({
    'mouseover' : function () {
        $(this).closest('tr').find('td').each(function () {
            if($(this).find('a.remove').length == 0){
                $(this).css('text-decoration', 'line-through');
            }
        });
    },
    'mouseout' : function () {
        $(this).closest('tr').find('td').css('text-decoration', 'none');
    }
}, 'a.remove');
于 2013-03-20T15:36:51.440 に答える
1 
$('a.remove').hover(function () {
    $(this).parents('tr').find('td').filter(function () {
        return !$(this).find('a.remove').length;
    }).css('text-decoration', 'line-through');
}, function () {
    $(this).parents('tr').find('td').css('text-decoration', 'none');
});

jsFiddleの例

于 2013-03-20T15:39:25.897 に答える