基本的に私が何をしようとしています何あまりにも特定の

Question

EDIT

せずに最も近いラベルを見つけることは、追加のマークアップを追加することなく、入力上の特定のクラスに「最も近い（前）」「第一」「ラベル」を解決するためです。いくつかのケースを見るために私の下のフィドルを見てください。私はこれにCSSなどを追加できることを知っています..私はJSソリューションを探しています。下に設けられた

のEND EDIT

フィドル。

複数のユースケースでクラスに対応する（前の）ラベルを見つけようとしています - 私は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

興味深い質問:)

私はこの問題を解決しようとしたが欲しいラベルにrequiredのクラスを置くことができ

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

だろう入力コントロールを中心として、ラベルを検索する半径を増やすたびに、

現在の親オブジェクト内にラベルが見つからない場合、親の親（祖先）を取ります。これは最大深度に達するまで続きます。

// 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>

リンク

Answer 2

はJavaScriptを使用している理由はありますか？ CSSを使用した簡単な解決策は、次に、あなたはちょうどあなたがアスタリスクに