検索とフィルタリングが両方とも機能しない

Question

特定のクラスのスパンを見つけようとしています。これには、jQueryのwidth属性を割り当てる変数が含まれています。私はそれを見つけるために使っているtdの子要素であるため、find（）を使うことができると思います。

私はfind（）とfilter（）の両方を試しましたが、何も返されません。 ヘルプ！

$(document).ready(function() { 
 
    //these two variables come from lists 
 
    var person = "Rick"; 
 
    var var1 = 2; 
 
    var element = $('td').filter(function() { 
 
    var Text = $(this).contents()[0].textContent.trim(); 
 
    return parseInt(Text, 10) == var1; 
 
    }); 
 
    add_html = element.append('</br><span class="calendar_element ' + person + '"></span>'); 
 
    $(window).on('resize', function() { 
 
    //calculate needed width of span (var for simplicity) \t 
 
    var length = 3; 
 
    var cell_width = element.width(); 
 

 
    var width = function() { 
 
     return length * cell_width; 
 
    } 
 
    //why is this not working??? 
 
    var resize_span = element.find('.calendar_element ' + person); 
 

 
    $('span.calendar_element ' + person).css('width', width); 
 
    }).resize(); 
 
});

div.class1 { 
 
    position: relative; 
 
} 
 

 
table { 
 
    border: 1px solid navy; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 

 
table th { 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 20px; 
 
} 
 

 
table td { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    text-align: right; 
 
    border: 1px solid #c6c6ec; 
 
} 
 

 
span.calendar_element { 
 
    background-color: purple; 
 
    height: 14px; 
 
    display: inline-block; 
 
    padding: 2px; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

あなたのコードでは、2つの問題があります。まず、widthを関数として定義しています。したがって、値としてcss()セッターに渡すと、期待した効果が得られません。第二に、あなたのセレクタはあまり正しくありません。クラスセレクタには接頭語.が必要です。両方のクラスが同じ要素にあるため、値の間にスペースは入れません。いくつかの追加のロジックの改正で、このバージョンをお試しください：

$(document).ready(function() { 
 
    var person = "Rick"; 
 
    var var1 = 2; 
 
    var $element = $('td').filter(function() { 
 
    return parseInt($(this).text().trim(), 10) == var1; 
 
    }).append('<br /><span class="calendar_element ' + person + '"></span>'); 
 
    
 
    $(window).on('resize', function() { 
 
    var length = 3; 
 
    var width = $element.width() * length;  
 
    $element.find('.calendar_element.' + person).css('width', width); 
 
    }).resize(); 
 
});

div.class1 { 
 
    position: relative; 
 
} 
 

 
table { 
 
    border: 1px solid navy; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 

 
table th { 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 20px; 
 
} 
 

 
table td { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    text-align: right; 
 
    border: 1px solid #c6c6ec; 
 
} 
 

 
span.calendar_element { 
 
    background-color: purple; 
 
    height: 14px; 
 
    display: inline-block; 
 
    padding: 2px; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>