<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="ChosenCategory" class="chosen">
<div class="cat_ch" name="1">
<div class="span3 ml10 first-component">
<input type="text" maxlength="5" value="hello"/>
<span class="validation-message" id="validation">hmm</span>
</div>
</div>
<div class="cat_ch" name="2">
<div class="span3 ml10 first-component">
<input type="text" maxlength="5" value="hello1" />
<span class="validation-message" id="validation">hmm1</span>
</div>
</div>
<div class="cat_ch" name="3">
<div class="span3 ml10 first-component">
<input type="text" maxlength="5" value="hello2"/>
<span class="validation-message" id="validation">hmm2</span>
</div>
</div>
<div class="cat_ch" name="5">
<div class="span3 ml10 first-component">
<input type="text" maxlength="5" value="hello5" />
<span class="validation-message" id="validation">hmm5</span>
</div>
</div>
</div>
</body>
</html>
// Code goes here
$(document).ready(function(){
var addedabbr = 'hello2'
$("#ChosenCategory").children().each(function () {
console.log($(this).find("input").val());
if($(this).find( "input" ).val() == addedabbr){
// $(this).css( "background-color", "red" );
console.log($(this));
$(this).find( "input" ).focus();
return false;
}
//alert("FW: " + $(this).attr("name") + ", val: " + $(this).val());
});
});
/* Styles go here */