javascript - 查找和过滤都不起作用

Question

我试图找到一个具有特定类的跨度，其中包含一个变量以在 jQuery 中为其分配宽度属性。我想我可以使用 find() 因为它是我用来查找它的 td 的子元素。

我尝试过 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)	
    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

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

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