查找最近的标签而不太具体

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/