Блог

У меня есть html-код:

 <form>
 ..
 <input>
 ..
</form>

<form>
 ..
 <p></p>
 ..
</form>
 

Как с помощью jQuery я могу найти формы, в которых нет / содержится входной тег внутри них?

С помощью jQuery:

 // find all <form> elements, and then filter that
// collection:
$('form').filter(function(){

  // we use find() to find the <input>
  // elements within the current <form>, and
  // if that count is 0 (there are no <input>
  // elements) we return the current <form> and
  // keep it in the collection:
  return $(this).find('input').length === 0;
})
 

 $('form').filter(function() {
  return $(this).find('input').length === 0;
}).addClass('hasNoInput'); 

 form {
  border: 2px solid black;
  margin: 0.5em auto;
  width: 80vw;
}

.hasNoInput {
  border-color: red;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
  </select>
</form>
<form>
  <label>Here's an amp;<inputamp;> element:
    <input type="text">
  </label>
</form> 

С помощью JavaScript:

 // we use the spread (...) operator with an Array
// literal to convert the NodeList returned by
// document.querySelectorAll() to an Array, and
// then use Array.prototype.filter() to filter
// that Array of Nodes:
[...document.querySelectorAll('form')].filter(
  // we use an Arrow function to pass the current
  // <form> element-node into the function, and we
  // retain <form> elements for which el.querySelector
  // (Element.prototype.querySelector) returns a null
  // (or any other falsey value):
  (el) => !el.querySelector('input')
);
 

 [...document.querySelectorAll('form')].filter(
  (el) => !el.querySelector('input')
).forEach(
  (el) => el.classList.add('hasNoInput')
); 

 form {
  border: 2px solid black;
  margin: 0.5em auto;
  width: 80vw;
}

.hasNoInput {
  border-color: red;
} 

 <form>
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
  </select>
</form>
<form>
  <label>Here's an amp;<inputamp;> element:
    <input type="text">
  </label>
</form> 

В случае, если вариант использования требует от вас поддержки старых браузеров, использование [...document.querySelectorAll() ] может быть заменено альтернативными методами, такими как:

 // here we use Array.from() to convert the NodeList
// returned by document.querySelectorAll() to an Array,
// and then use Array.prototype.filter() to filter
// that Array of Nodes:
Array.from(document.querySelectorAll('form')).filter(
  // we use an Arrow function to pass the current
  // <form> element-node into the function, and we
  // retain <form> elements for which el.querySelector
  // (Element.prototype.querySelector) returns a null
  // (or any other falsey value):
  (el) => !el.querySelector('input')
);
 

 Array.from(document.querySelectorAll('form')).filter(
  (el) => !el.querySelector('input')
).forEach(
  (el) => el.classList.add('hasNoInput')
); 

 form {
  border: 2px solid black;
  margin: 0.5em auto;
  width: 80vw;
}

.hasNoInput {
  border-color: red;
} 

 <form>
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
  </select>
</form>
<form>
  <label>Here's an amp;<inputamp;> element:
    <input type="text">
  </label>
</form> 

Ссылки:

• JavaScript:
  • Функции со стрелками.
  • Array.prototype.forEach() .
  • document.querySelectorAll() .
  • Element.classList API.
  • Element.querySelector() .
  • Синтаксис распространения.
• jQuery ( jQuery ):
  • filter() .
  • find() .