检查元素是否具有某个 class 并且属于包含某个值的表单

Question

我需要创建一个验证 function 它将检查某个元素的两件事：

1. 有一定的class
2. 它属于在表单操作上包含部分文本匹配的表单

例如，给定以下内容：

<form method="post" action="/page1">
  <div>
    <ul>
      <li><input type="text" id="text1" class="red" /></li>
      <li><input type="text" id="text2" class="red" /></li>
      <li><button id="button1" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2">
  <div>
    <ul>
      <li><input type="text" id="text3" class="red" /></li>
      <li><input type="text" id="text4" class="blue" /></li>
      <li><button id="button2" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2andpage3">
  <div>
    <ul>
      <li><input type="text" id="text5" class="red" /></li>
      <li><input type="text" id="text6" class="blue" /></li>
      <li><button id="button3" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

我希望能够创建一个 function 并获得以下结果：

isElementValid('text1', 'blue', 'page2') // false
isElementValid('button1', 'blue', 'page2') // false
isElementValid('text3', 'blue', 'page2') // false
isElementValid('text4', 'blue', 'page2') // true
isElementValid('button2', 'blue', 'page2') // true
isElementValid('button3', 'blue', 'page2') // true

我假设我将能够使用hasClass和parents来创建以下内容：

function isElementValid(element, color, action) {
 var matchingClass = $(element).hasClass(color);
 var matchingParent = $(element).parents() //....attr('action').contains(action);
 return matchingClass && matchingParent;
}

但我不确定检查父母的行动表格的最佳方式。 这是沿着正确的路线还是有更好的方法？

Answer 1

要检测元素上的属性是否包含给定值，您可以使用Attribute contains选择器。 然后，您可以使用生成的 jQuery object 的length属性来确定是否找到任何东西。

您还应该注意，您的逻辑在您使用的element ID 上缺少#选择器前缀。 尝试这个：

 function isElementValid(element, color, action) { let $el = $('#' + element); let matchingClass = $el.hasClass(color); let matchingParent = $el.closest(`form[action*="${action}"]`).length;= 0; return matchingClass && matchingParent. } console,log(isElementValid('text1', 'blue'; 'page2')). // false console,log(isElementValid('button1', 'blue'; 'page2')). // false console,log(isElementValid('text3', 'blue'; 'page2')). // false console,log(isElementValid('text4', 'blue'; 'page2')). // true console,log(isElementValid('button2', 'blue'; 'page2')). // true console,log(isElementValid('button3', 'blue'; 'page2')); // true

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="/page1"> <div> <ul> <li><input type="text" id="text1" class="red" /></li> <li><input type="text" id="text2" class="red" /></li> <li><button id="button1" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2"> <div> <ul> <li><input type="text" id="text3" class="red" /></li> <li><input type="text" id="text4" class="blue" /></li> <li><button id="button2" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2andpage3"> <div> <ul> <li><input type="text" id="text5" class="red" /></li> <li><input type="text" id="text6" class="blue" /></li> <li><button id="button3" class="blue">Enter</button></li> </ul> </div> </form>

Answer 2

JQuery 对于这种微不足道的事情真的没有多大帮助。

请参阅下面代码中的注释。

 function isElementValid(element, color, action) { // Check the element's class list and see if the supplied // class name is on that list. Also find the closest ancestor // form and check its action to see if it contains the action parameter. // Return whether both tests were true or not return element.classList.contains(color) && element.closest("form").action.indexOf(action) > -1; } console.log(isElementValid(document.getElementById('text1'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('button1'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('text3'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('text4'), 'blue', 'page2')); // true console.log(isElementValid(document.getElementById('button2'), 'blue', 'page2')); // true console.log(isElementValid(document.getElementById('button3'), 'blue', 'page2')); // true

 <form method="post" action="/page1"> <div> <ul> <li><input type="text" id="text1" class="red" /></li> <li><input type="text" id="text2" class="red" /></li> <li><button id="button1" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2"> <div> <ul> <li><input type="text" id="text3" class="red" /></li> <li><input type="text" id="text4" class="blue" /></li> <li><button id="button2" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2andpage3"> <div> <ul> <li><input type="text" id="text5" class="red" /></li> <li><input type="text" id="text6" class="blue" /></li> <li><button id="button3" class="blue">Enter</button></li> </ul> </div> </form>

Answer 3

它是最接近的形式吗？ 我相信你只需要这个：

$(element).closest('form').attr('action');

此处的文档和其他示例。