If/else JavaScript statement with multiple div traversal
I'm trying to check a set of divs with id='checkbox-selector-chosen' to see if a dynamic variable name exists in those divs. The code below works only if one 'checkbox-selector-chosen' div exists. What I'm trying to do is get the code below to check all of the 'checkbox-selector-chosen' divs for the existence of name.
if($(".checkbox-selector-chosen").text() == name) {
do something...
}
The structure of the divs I'm working with is as follows:
<div id="selected-results" class="group">
<div class="checkbox-selector-chosen">John</div>
<div class="checkbox-selector-chosen">Dave</div>
<div class="checkbox-selector-chosen">Jack</div>
</div>
I'm new to JS/JQuery and I'm sure this is a simple problem, but after 2 days of banging my head开发者_如何学编程 against my desk I've decided to ask on here.
Any help will be greatly appreciated!
You may want to use the :contains() selector to see if the item exists (JsFiddle Demo)
var name='Dave';
//Get all items that contain 'Dave'
var items = $(".checkbox-selector-chosen:contains('" + name + "')");
if (items.length > 0) {
alert(items.length + ' items found');
}
UPDATE
If you're worried about having more than one matching item, you can use my example, AND the each() function. (JsFiddle Demo). The Beauty of this approach is that you do not have to loop through all of the child divs - you only need to loop through the divs that contain the desired matching text.
var name='Dave';
//Get all items that contain 'Dave'
var items = $(".checkbox-selector-chosen:contains('" + name + "')");
if (items.length > 0) {
items.each(function(){
if ($(this).html()==name){
alert('item found!');
break;
}
});
}
UPDATE 2
Here is an example which demonstrates the full use of this technique. When you click on a name div, the name is parsed from the object that is clicked and the we use the above method to find the right div. This is, of course, not the best way to accomplish this specific task, but simple illustrates the concept. (JsFiddle Demo)
function findName(name){
var items = $(".checkbox-selector-chosen:contains('" + name + "')");
$('.checkbox-selector-chosen').css({'background':'#fff'});
if (items.length > 0) {
items.each(function(){
if ($(this).text()==name){
$(this).css({'background':'#ff0'});
}
});
}
}
$('.checkbox-selector-chosen').click(function(){
findName($(this).text());
});
Your class selector returns a collection of matches. You could try each() to iterate over them:
$(".checkbox-selector-chosen").each( function() {
if ($(this).text() == name) {
/* ..do something... */
} } );
$('.checkbox-selector-chosen').each(function(){
if($(this).text() == name) {
do something...
}
});
Maybe this is what you're looking for? ahh beaten to it!
You can user jquery 'each' syntax for this.
$(".checkbox-selector-chosen").each(function(index, value){
console.info("index = "+index +" = "+value);
if(value == name){
console.info("match");
}
});
You want to use jQuery :contains() selector.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<div id="selected-results" class="group">
<div class="checkbox-selector-chosen">John</div>
<div class="checkbox-selector-chosen">Dave</div>
<div class="checkbox-selector-chosen">Jack</div>
</div>
<script type="text/javascript">
jQuery(".checkbox-selector-chosen:contains(John)").css("background-color","red")
</script>
</body>
</html>
JSBIN
You could use the contains() selector to filter the results:
$('input[type="checkbox"]').change(function(){
var checked = this.checked;
$('.checkbox-selector-chosen')
.filter(":contains("+this.value+")")
.css('color',function(){
if (checked) return "red";
else return "black";
});
});
example: http://jsfiddle.net/niklasvh/mww3J/
加载中,请稍侯......
精彩评论