僅當 label 文本可用時才添加星號

Question

如果輸入字段是required的，我正在嘗試向輸入的 label 文本添加一個星號。 我使用了這個答案並引用了這個答案，我可以使用以下代碼獲得所需的結果

jQuery(function() {
    jQuery("[required]").before(jQuery("<span>", {
        class: "required"
    }).html("*"));
});

但是，我不希望為 label 文本不可用的輸入字段添加星號。

請看以下 label 文本不可用的地方；

<label>
    <span class="required">*</span>
    <input type="text" class="form-control" id="perm_city" name="perm_city" required="required" />
</label>

與以下 label 文本可用的情況相反

<label for="clientid">Client ID Number
    <span class="required">*</span>
    <input type="text" class="form-control" id="clientid" name="clientid" required="required" />
</label>

我的 jQuery 腳本在輸入元素前添加了星號。 但是想要的output如下；

誰能幫我實現這個目標？ TIA

Answer 1

如果這是包含標簽的方式，那么您可以克隆每個<label>元素並刪除其子元素，然后檢查是否還有任何文本。 這就是我的意思（我對jQuery不熟悉，所以我會用vanilla JS寫）：

var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
  var clonedLabel = labels[i].cloneNode(true);
  var chldrn = clonedLabel.children.length;
  for (var j = 0; j < chldrn; j++) {
    clonedLabel.removeChild(clonedLabel.children[0]);
  }
  // Remove spaces
  var innerHTML = clonedLabel.innerHTML.trim();
  if (innerHTML != "") {
    // Add the asterisk
    var span = document.createElement("span");
    span.className = "required";
    span.innerHTML = "*";
    labels[i].insertBefore(span,labels[i].children[0]);
  }
}

Answer 2

您可以使用.each循環遍歷所有必需的輸入，然后使用.clone & .text()獲取 label texts ，忽略它擁有的所有子項。 然后，如果文本的長度greater then 0 append 你的跨度。

演示代碼：

 jQuery(function() { //loop through required input jQuery("[required]").each(function() { //get label and remove child only get text var cloned = jQuery(this).closest("label").clone().children().remove().end().text().trim(); console.log("Length--" + cloned.length) //check if txt length is > 0 if (cloned.length > 0) { jQuery(this).before(jQuery("<span>", { class: "required" }).html("*")); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label> <input type="text" class="form-control" id="perm_city" name="perm_city" required="required" /> </label><br> <label for="clientid">Client ID Number <input type="text" class="form-control" id="clientid" name="clientid" required="required" /> </label><br> <label for="clientid">Client ID Number1 <input type="text" class="form-control" id="clientid" name="clientid" required="required" /> </label><br> <label for="clientid"> <input type="text" class="form-control" id="clientid" name="clientid" required="required" /> </label>