jQuery each - combining (this) with class specific

问题:

I'm trying to cycle through some table rows. The simplified rows are as follows:

<table>
  <tr id="ucf48">
    <td class="ucf_text">
      <input name="ucf_t48" value="Ann becomes very involved in the text she is reading." type="text">
    </td>
  </tr>
  <tr id="ucf351">
    <td class="ucf_text">
      <input name="ucf_t351" value="Ann is a fast and confident reader." type="text">
    </td>
  </tr>
</table>

I'm using this code to cycle:

$('#ucf tr').each(function(i,obj){
    var cn=$(this).attr('id').substr(3);
    var t=$(this +'.ucf_text input').val();

    console.log("Row "+i);
    console.log("Cnum: "+cn);
    console.log(t);
});

The console output is:

Row 0
Cnum: 48
Ann becomes very involved in the text she is reading.
Row 1
Cnum: 351
Ann becomes very involved in the text she is reading.

Now before someone flames me, I know I can do this another way by referring to the data I want using 'name'. Why, however, does my cnum variable follow 'this' but the t variable does not?

Thanks.

回答1:

When you do:

var t=$(this +'.ucf_text input').val();

this isn't converting correctly to a string.

Try:

var t=$(this).find('.ucf_text input').val();

回答2:

var t=$(this +'.ucf_text input').val();

You're trying to concatenate a string with a DOM node. I assume you want the children of each row? Which would be:
var t=$(this).find('.ucf_text input').val();

回答3:

You cannot concatenate DOM objects and strings.

You can easily fix this by specifying this as the context of the selector:

var t = $('.ucf_text input', this).val();

By doing so the selector only matches elements inside the given context, i.e. the table row in your case.

回答4:

You've already got 2 correct answers, but just for the sake of diversity, here's another way to do it:

var t = $('.ucf_text input', this).val();

回答5:

Actually, this is because $(this) [tr] doesn't have the class .ucf_text

I think you meant the td beneath it

Add a space to signify you mean the child. :)

var t=$(this +' .ucf_text input').val();
               ^ Space!

EDIT: Or not!

var t=$(this).children('.ucf_text').children('input').val();

Find is way cooler, but I'm editing for the sake of not leaving a wrong answer up and wanted to be somewhat original, and besides... Maybe you need a distinct path to the input?