如何在jquery中找到具有特定类名的行？

Question

I have a table which has hundreds of items listed like below.

<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"           
readonly="readonly" /></td><</tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"    
readonly="readonly" /></td><</tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"  
readonly="readonly" /></td><</tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"  
readonly="readonly" /></td><</tr>
<tr class="discount" id="trline05"><td>5</td>
<td><input type="text" class="ordItem" id="oline05" value="10"  
readonly="readonly" /></td><</tr>

....

I am trying to skip the "outofstock" row with the following each statement

$.each($('.ordItem'), function() {
    if ( !$(this).hasClass(outofstock)) {
        data[$(this).data('code')] = $(this).val();
    }
});

how to tr row and skip that row?

Answer 1

So select the available rows and than select the input.

$('tr.available .ordItem').each()

 $('tr.available .ordItem').each( function(){ console.log(this.id) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="available" id="trline01"><td>1</td> <td><input type="text" class="ordItem" id="oline01" value="100" readonly="readonly" /></td></tr> <tr class="available" id="trline02"><td>2</td> <td><input type="text" class="ordItem" id="oline02" value="20" readonly="readonly" /></td></tr> <tr class="outofstock" id="trline03"><td>3</td> <td><input type="text" class="ordItem" id="oline03" value="0" readonly="readonly" /></td></tr> <tr class="available" id="trline04"><td>4</td> <td><input type="text" class="ordItem" id="oline04" value="20" readonly="readonly" /></td></tr> </table> 

and since you did not give all the details up front, you can use not() to remove the outofstock rows

 $('tr:not(.outofstock) .ordItem').each( function(){ console.log(this.id) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="available" id="trline01"><td>1</td> <td><input type="text" class="ordItem" id="oline01" value="100" readonly="readonly" /></td></tr> <tr class="available" id="trline02"><td>2</td> <td><input type="text" class="ordItem" id="oline02" value="20" readonly="readonly" /></td></tr> <tr class="outofstock" id="trline03"><td>3</td> <td><input type="text" class="ordItem" id="oline03" value="0" readonly="readonly" /></td></tr> <tr class="available" id="trline04"><td>4</td> <td><input type="text" class="ordItem" id="oline04" value="20" readonly="readonly" /></td></tr> </table> 

Answer 2

$.each($('.available .ordItem'), function(index, item) {
    console.log(item);
})

This will console all the inputs with the class '.ordItem' that are children of rows with the class '.avaliable'

Answer 3

You can use the following code to retrieve any element with whatever class is assigned to it.

$(".your-class-name")

and save it in a variable if you need to.

let someElement = $(".your-class-name")