Can I use jQuery find() for more than one element type at the same time?
JqueryJquery Problem Overview
I am using the following function to change the padding in a column on my forms:
function padTitles() {
$('#option-grid #dataTable tr, #topic-grid #dataTable tr')
.each(function () {
var tds = $(this).find('input'),
text = tds.filter('[id^="input_TempRowKey_"]').val(),
tdToPad = tds.filter('[id^="input_Title_"]'),
pad;
if (/\.0$/.test(text)) {
pad = 10;
level = 1;
} else {
pad = 35;
level = 2;
}
tdToPad.css('margin-left', pad);
a = tdToPad.closest('tr');
if (tdToPad.closest('tr').get().className) {
tdToPad.closest('tr').get().className = tdToPad.closest('tr').get().className.replace(/\blevel\-.*?\b/g, 'level-' + level);
} else {
tdToPad.closest('tr').addClass('level-' + level)
}
});
}
It works well for this form HTML:
<td id="title_1" class=" ">
<input type="text" value="Tests" name="item.Title" id="input_Title_1" >
</td>
Now I would also like it to work for the following HTML:
<td id="title_1" class=" ">
<textarea name="item.Title" id="input_Title_1">Tests</textarea>
</td>
Is there a way I can change this function so it works for either an input or textarea? I assume the way to do this is to change var tds = $(this).find('input'), however I am not sure how to change it or even if it's possible to change to "find" either a textarea or an input.
Jquery Solutions
Solution 1 - Jquery
Use a comma to union multiple queries:
var tds = $(this).find('input, textarea');
You can also use :input as a selector, but it's not as efficient and may also include some things you'd rather not include.
Solution 2 - Jquery
You can use .children() to select the tds child whatever it is
var tds = $(this).children();
Solution 3 - Jquery
You cannot add a textarea with the same id as another element. Its incorrect. id values are unique for a single html element within the document.
I would suggest to you class instead.
<input type="text" value="Tests" class="myclass" name="item.Title" id="input_Title_1" >
<textarea name="item.Title" class="myclass" id="input_Title_2">Tests</textarea>
var tds = $(this).find('.myclass')
Solution 4 - Jquery
jQuery( "selector1, selector2, selectorN" )
selector1: Any valid selector.
selector2: Another valid selector.
selectorN: As many more valid selectors as you like.
The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
Example: Finds the elements that match any of these three selectors.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
</body>
</html>