Question

修改

基本上我要做的就是解决＆＃34;最近的（上一个）＆＃34; ＆＃34;首先＆＃34; ＆＃34;标签＆＃34;到输入的特定类而不添加额外的标记。请查看下面的小提琴以查看几个案例。我知道我可以添加css等..我正在寻找一个JS解决方案。

结束编辑

Fiddle在下面提供。

我试图在一个类中找到一个相应的（上一个）标签 - 在多个用例中 - 我不知道HTML必须过于严格 - 我希望能够在各种解决方案......

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

以前的作品，但不适用于标签可能不是兄弟或有嵌套div的所有实例。

我也尝试过：

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

这也适用，但如果.row中有多个标签，则将*应用于所有标签。

我需要一个解决方案来找到班级最近的标签。

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

Answer 1

你有使用javascript的原因吗？使用css的简单解决方案是

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

然后你可以在你希望拥有星号的标签上放一类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 Fiddle https://jsfiddle.net/davidsekar/8xqzupwe/6/

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

2 个答案: