查找最近的標簽而不太具體

Question

編輯

本質上，我想做的是在輸入上解決特定類的“最近（上一個）”，“第一”，“標簽”，而無需添加其他標記。 請在下面查看我的小提琴以查看一些案例。 我知道我可以添加CSS等。。我正在尋找JS解決方案。

結束編輯

小提琴下面提供。

我正在嘗試為一個類找到一個對應的（上一個）標簽-在多個用例中-我不需要HTML過於嚴格-我希望能夠在各種解決方案中使用它。 ..

$(".FINDME")
    .siblings("label")
    .prepend("<span style='color: magenta;'>* </span>");

先前的方法適用，但不適用於標簽可能不是同級對象或嵌套div的所有實例。

我也嘗試過：

$(".FINDME")
    .closest(".row")
    .find("label")
    .append("<span style='color: magenta;'> *</span>");

這同樣適用，但是如果.row有多個標簽， .row *應用於所有標簽。

我需要一種解決方案來找到距班級最近的標簽。

小提琴： https : //jsfiddle.net/r6Lx4ytg/

Answer 1

您使用JavaScript是有原因的嗎？ CSS的簡單解決方案是

.required::after {
  content: "*";
  color: magenta;
}

然后，您可以在required使用星號的標簽上放置一類required項

Answer 2

有趣的問題：）

我試圖通過考慮將輸入控件作為中心並每次增加搜索標簽的半徑來解決此問題。

如果我在當前父對象中找不到標簽，那么我將選擇父對象的父對象（祖先），直到達到最大深度為止。

 // comment out either one to see the difference: //$(".FINDME").siblings("label").prepend("<span style='color: magenta;'>* </span>"); //$(".FINDME").closest(".row").find("label").append("<span style='color: magenta;'> *</span>"); $(".FINDME").each(function(idx, obj) { var $obj = $(obj); var parent = $obj; var depth = 5, // You can define till which depth you can test for nearest label currentDepth = 0; while (true) { parent = parent.parent(); currentDepth++; if (!parent || currentDepth == depth) break; var labels = parent.find("label"); if (labels.length > 0) { var myLabel = $(labels[0]); if (myLabel.find(".star").length == 0) myLabel.prepend("<span class='star' style='color: magenta;'>* </span>"); break; } } }); 

 .row { margin-top: 10px; width: 100%; } .row .col-md-2 { float: left; width: 16.66666666666667%; } .row .col-md-6 { float: left; width: 50%; } .row .col-md-10 { float: left; width: 83.33333333333333%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-2"> <label>First Name:</label> </div> <div class="col-md-10"> <input type="text" value="" class="FINDME" placeholder="First Name" /> </div> </div> <div class="row"> <label>Middle Name:</label> <input type="text" value="" class="FINDME" placeholder="Middle Name" /> </div> <div class="row"> <div class="col-md-2"> <label>Last Name:</label> </div> <div class="col-md-10"> <input type="text" value="" class="FINDME" placeholder="Last Name" /> </div> </div> <div class="row"> <div class="col-md-6"> <label>Gender:</label> <br> <div class="FINDME"> <input type="radio" name="gender" value="male">Male <br> <input type="radio" name="gender" value="female">Female <br> <input type="radio" name="gender" value="alien">Alien </div> </div> <div class="col-md-6"> <label>Food:</label> <div class=""> <input type="checkbox" name="option1" value="Milk">Milk <br> <input type="checkbox" name="option2" value="Butter">Butter <br> <input type="checkbox" name="option3" value="Cheese">Cheese <br> </div> </div> </div> 

鏈接到JS小提琴https://jsfiddle.net/davidsekar/8xqzupwe/6/