查找并过滤两者都不起作用

Question

我试图找到一个包含特定类的span，其中包含一个变量，用于在jQuery中为其赋予width属性。我想我可以使用find（），因为它是我用来找到它的td的子元素。

我已尝试过find（）和filter（），但它并没有返回任何内容。 救命啊！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码有两个问题。首先，您将width定义为函数，因此将其作为值传递给css() setter不会产生您期望的效果。其次，你的选择器不太对劲。在类选择器上需要.前缀，并且值之间没有空格，因为两个类都在同一元素上。试试这个版本，加上一些额外的逻辑修正：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;