Asked  7 Months ago    Answers:  5   Viewed   38 times

I have a table column I’m trying to expand and hide. jQuery seems to hide the <td> elements when I select it by class but not by the element’s name.

For example:

$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.

Note the HTML below. The second column has the same name for all rows. How could I create this collection using the name attribute?

<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>

 Answers

77

You can use the jQuery attribute selector:

$('td[name="tcol1"]')   // Matches exactly 'tcol1'
$('td[name^="tcol"]' )  // Matches those that begin with 'tcol'
$('td[name$="tcol"]' )  // Matches those that end with 'tcol'
$('td[name*="tcol"]' )  // Matches those that contain 'tcol'
Tuesday, June 1, 2021
 
turson
answered 7 Months ago
44

If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:

$('.a.b')

The order is not relevant, so you can also swap the classes:

$('.b.a')

So to match a div element that has an ID of a with classes b and c, you would write:

$('div#a.b.c')

(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)

Tuesday, June 1, 2021
 
TheFrack
answered 7 Months ago
12

You can combine both selectors in a multiple attribute selector.

?$("[id^=AAA_][id$=_BBB]")

It will return all the elements that matches all the specified attribute filters:

  • [id^=AAA_] matches elements with id attribute starting with AAA_, and
  • [id$=_BBB] matches elements with id attribute ending with _BBB.

Another generic alternatives:

  • Using a custom :regex() selector,
  • Using a .filter()-based approach.
Thursday, June 3, 2021
 
mertak
answered 7 Months ago
26

You want to use .appendTo(...) for this style.

$("<li/>").appendTo("#fbsignup .message ul").html("Fields marked with * are required.");​

Try it.

Sunday, October 17, 2021
 
relyt
answered 2 Months ago
78

You can change your selector to exclude the #total as you don't want to listen to its change - $(':input').not('#total').change.

You can use a #map() jquery function to get the array of checked boxes.

The next step would be to multiply them all - using #reduce() function to add the array.

See demo below:

$(':input').not('#total').change(function() {
  var tot = 1;

  var s1 = +$('input[name=section1]:checked').val();
  var s2 = $('input[name=section2]:checked').map(function() {
    return +$(this).val();
  }).get();
  var s3 = +$('select').val();
  $('#total').val(s1 * (s2.reduce(function(p,c){
    return p + c;
  },0) || 1) * s3);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <div id="section1">Section 1
    <br><input type="radio" name="section1" value="2"> x2
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1"> x1
    <br><input type="radio" name="section1" value="1"> x1
  </div>
  <br>
  <div id="section2">Section 2
    <br><label><input type="checkbox" name="section2" value="4"><span>1</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>2</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>3</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>4</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>5</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>6</span></label>
    <br><label><input type="checkbox" name="section2" value="4"><span>7</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>8</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>9</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>10</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>11</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>12</span></label>
  </div>
  <br>
  <div>Section 3<br>
    <select>
   <option value="7">1 week</option>
   <option value="14">2 weeks</option>
   <option value="21">3 weeks</option>
   <option value="28">4 weeks</option>
  </select>
  </div>
  <input type="text" value="0" id="total">
</form>
Tuesday, December 7, 2021
 
Ethunxxx
answered 2 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share