隐藏不包含特定文本的父元素

huangapple
go评论110阅读模式
英文:

Hide parent element not containing specific text

问题

我尝试使用子元素的ID作为选择器隐藏父元素；如果它们不包含特定文本，则使用 *。必须这样，并且必须使用jQuery。

到目前为止，我有这个：

HTML

  1. <div>
  2.     <label>
  3.         名字 <font color="red">*</font>
  4.         <input type="text" id="guest_first_name">
  5.     </label>
  6. </div>
  8. </br>
  10. <div>
  11.     <label>
  12.         姓 
  13.         <input type="text" id="guest_last_name">
  14.     </label>
  15. </div>

jQuery

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  3. <script>
  4.  $(document).ready(function() {
  6.     let checkthis = $("#guest_first_name, #guest_last_name").parent();  
  7.     var removewithout = "*";
  8.     checkthis.not(removewithout).hide();
  10.  })
  12. </script>

努力检查不包含文本的元素，然后隐藏。试图隐藏不包含 * 文本的 <label>，例如 姓。希望这清楚。感谢您的帮助。谢谢。

英文:

I am trying to hide parent elements using ID of child as selector; if they do not contain specific text. In this case *. Must be this way and have to use jQuery.

So far I have this:

HTML

  1. <div>
  2.     <label>
  3.         First name <font color="red">*</font>
  4.         <input type="text" id="guest_first_name">
  5.     </label>
  6. </div>
  8. </br>
  10. <div>
  11.     <label>
  12.         Last name 
  13.         <input type="text" id="guest_last_name">
  14.     </label>
  15. </div>

jQuery

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  3. <script>
  4.  $(document).ready(function() {
  6.     let checkthis = $("#guest_first_name, #guest_last_name").parent();  
  7.     var removewithout = "*";
  8.     checkthis.not(removewithout).hide();
  10.  })
  12. </script>

Struggling to check elements that do not contain text and then hide. Trying to hide <label> with text Last name as it does not contain *. Hope this is clear. Any help is appreciated.

Thanks

答案1

得分: 4

.not()方法在jquery和javascript的.not选择器中只接受对象、选择器和函数作为参数。但你正在传递一个字符作为参数：

以下是更简洁的代码可以帮到你：

HTML：

  1. <div>
  2.    <label>
  3.       名字 <font color="red">*</font>
  4.       <input type="text" id="guest_first_name">
  5.   </label>
  6. </div>
  8. <br>
  10. <div>
  11.   <label>
  12.       姓氏 
  13.       <input type="text" id="guest_last_name">
  14.   </label>
  15. </div>

JQUERY：

  1. $(document).ready(function() {
  2.     let checkthis = $("input['text']").parent();
  3.     var removewithout = /\*/;
  4.     checkthis.not((i, e) => removewithout.test(e.innerHTML)).hide();
  5. });
英文:

The .not() method in jquery & .not selector in javascript only accepts the objects, selectors and functions as parameters.
But you are passing a character for that:

Here is the more brief code that can help you:

HTML:

  1.   &lt;div&gt;
  2.      &lt;label&gt;
  3.         First name &lt;font color=&quot;red&quot;&gt;*&lt;/font&gt;
  4.         &lt;input type=&quot;text&quot; id=&quot;guest_first_name&quot;&gt;
  5.     &lt;/label&gt;
  6.   &lt;/div&gt;
  8.  &lt;/br&gt;
  10.  &lt;div&gt;
  11.     &lt;label&gt;
  12.         Last name 
  13.         &lt;input type=&quot;text&quot; id=&quot;guest_last_name&quot;&gt;
  14.     &lt;/label&gt;
  15.  &lt;/div&gt;

JQUERY:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2.     let checkthis = $(&quot;input[&#39;text&#39;]&quot;).parent();
  3.     var removewithout = /\*/;
  4.     checkthis.not((i, e) =&gt; removewithout.test(e.innerHTML)).hide();
  5. });

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.     &lt;label&gt;
  3.         First name &lt;font color=&quot;red&quot;&gt;*&lt;/font&gt;
  4.         &lt;input type=&quot;text&quot; id=&quot;guest_first_name&quot;&gt;
  5.     &lt;/label&gt;
  6. &lt;/div&gt;
  8. &lt;br&gt;
  10. &lt;div&gt;
  11.     &lt;label&gt;
  12.         Last name 
  13.         &lt;input type=&quot;text&quot; id=&quot;guest_last_name&quot;&gt;
  14.     &lt;/label&gt;
  15. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 2

.not() 方法接受选择器、jQuery 对象和函数。

  1. $(document).ready(function() {
  3.   let checkthis = $("#guest_first_name, #guest_last_name").parent();
  4.   var removewithout = /\*/;
  5.   checkthis.not((i, e) => removewithout.test(e.innerHTML)).hide();
  7. })

参考资料:

英文:

The .not() method accepts selectors, jQuery objects, and functions.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  3.   let checkthis = $(&quot;#guest_first_name, #guest_last_name&quot;).parent();
  4.   var removewithout = /\*/;
  5.   checkthis.not((i, e) =&gt; removewithout.test(e.innerHTML)).hide();
  7. })

<!-- end snippet -->

Reference:

huangapple
  • 本文由 发表于 2023年6月2日 10:53:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/76386852.html
  • arrays
  • html
  • javascript
  • jquery
  • show-hide
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定