I am using simple jquery selector but unfortunately didn't get the required result.
my code is:
$(document).ready(function() {
var displayName = $('.divclass').find('ul').find('li:first').text();
if ($('.divclass').find('ul').find('li:selected').length) {
displayName = $('.divclass').find('ul').find('li:selected').text();
}
$('divclass').find('button').html(displayName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">
sometext
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
sometext1
</li>
<li selected="selected">
sometext2
</li>
<li>
sometext3
</li>
</ul>
</div>
I called it on document.ready. It executes but did not give me the proper result, what I am doing wrong to select the li with selected attribute.
:selected has a specific meaning: An option element that is currently selected. Perhaps somewhat counter-intuitively, that selected state is not reflected in an attribute (just the default) and again, it only applies to option elements.
selected isn't a valid attribute for li elements. You could either use data-selected for your own flag attribute, or a class.
If you used data-selected, you'd use [data-selected] in the selector:
<li selected="selected">
...find('ul').find('li[data-selected]').length...
...and then add/remove the attribute as appropriate.
If you use a class instead, it's a class selector:
<li class="selected">
...find('ul').find('li.selected').length...
...and then you add/remove the class as appropriate.
Related
I have a model, i.e. like this:
[{
"Name" : "Foo",
"CssClass" : "class1"
},
{
"Name" : "Bar",
"CssClass" : "class2"
}]
Which is presented using the following template:
<li v-for="foobar in model">
<span class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
How could I append the CssClass property to the span?
I know you could do :class="{ active: isActive }" (as per the documentation), but this uses a predefined class called active, whereas I want to append the class name from the model.
I tried using <span class="otherclass anotherclass" :class="foobar.CssClass"> but that didn't add CssClass to class at all.
How could I go about making this work so that the <span> will effectively be rendered as <span class="otherclass anotherclass class1"> (for the first model entry)? And how could I also use a default value in case CssClass is not defined?
You can append the class like so
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
I ran into the same issue in the past. During render all three classes will combine into one class="my_class_from_foobar otherclass anotherclass"
You can pass an object or an array to :class. You can also use class and :class together and Vue will resolve both correctly without issues:
<li v-for="foobar in model">
<span class="otherclass anotherclass" :class="[foobar.CssClass]">{{foobar.Name}}</span>
</li>
<li v-for="foobar in model">
<span :class="'otherclass anotherclass ' + foobar.CssClass">{{foobar.Name}</span>
</li>
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}</span>
</li>
Both should work
I have a html fragment as follows:
<div id="samplediv">
<ul>
<li name="A">
<a id="A">
</li>
<li name="B">
<a id="B">
</li>
</ul>
</div>
I have a text called:
var text = "B";
I have want to check if the text matches with any of the elements of li and add a class name "disable" for the anchor element not matching with text.
I my case I want to add a class called "disable" for
<a id="A">
This is what I have tried:
$("#samplediv li").each(function() {
if($(this).name != text){
$(this).closest("a").addClass("disabled");
}
});
But the thing here is $(this).name is evaluating to "undefined" . What is it that I am missing?
Edit: Due to typo ,had missed the tag
There are multiple issues,
$(this) returns a jQuery object which does not have name property, instead you can use $(this).attr('name')
.closest() is used to find the ancestor element, but the a is a descendant of the li element, so you need to use find()
You can find all the li elements which does not have the given name and then find the a element within it like
var text = 'B';
$("#samplediv li").not('[name="' + text + '"]').find("a").addClass("disabled");
a.disabled {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samplediv">
<ul>
<li name="A">
<a id="A">a</a>
</li>
<li name="B">
<a id="B">b</a>
</li>
</ul>
</div>
var text = "B";
$("#samplediv li").filter(function() {//use filter
return $(this).attr('name') != text;//use .attr() to get name attribute
}).find('a').addClass("disabled");//use find to get the anchor tag
.disabled{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samplediv">
<ul>
<li name="A">
<a id="A">a</a>
</li>
<li name="B">
<a id="B">b</a>
</li>
</ul>
</div>
Use .filter()
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
My ASPX code looks like this:
<ul id="userlist">
<a class="s-test">
<li>
<span id="userlistspan" class="tt-User" value="1">Cardiologist</span>
<span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
</li>
</a>
<a class="s-test">
<li>
<span id="userlistspan" class="tt-User" value="2">Cardio</span>
<span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
</li>
</a>
</ul>
The jQuery I have tried is like this:
$('#userlist li #userlistspan').click(function () {
$('#txtSearch').val($(this).text());
})
//here am getting text like Cardio
How can I get value like value=2 from that span?
Your HTML is completely invalid for several reasons:
you cannot have an a element as a direct child of a ul. The li must be the child element.
You have duplicate id attributes when the id should be unique in same document, use classes to group elements instead.
span elements do not have a value attribute, if you want to store custom data with an element, use the data-* attribute.
the a element must have either an href or name attribute, however their use in this case seems redundant so you can remove them.
You need to fix all those issues first:
<ul id="userlist">
<li>
<span class="userlistspan tt-User" data-value="1">Cardiologist</span>
<span class="userlistspan1 tt-Userss">SPECIALITY</span>
</li>
<li>
<span class="userlistspan tt-User" data-value="2">Cardio</span>
<span class="userlistspan1 tt-Userss">SPECIALITY</span>
</li>
</ul>
From there you can attach the click handler to the .userlistspan class, and use the this keyword to reference the element which raised the event. You can then use the data() method to get the data-value, like this:
$('#userlist li .userlistspan').click(function() {
var $span = $(this);
$('#txtSearch').val($span.text());
var value = $span.data('value'); // = 1 or 2, depending on which element you clicked.
})
I have two list items, and i have to show the first item if some condition is met, otherwise i will show the second one.
for example
<li class="login" style="display:block">
</li>
<li class="login" style="display:none">
<a class="btn" href="#" id="sign_up_link" data-modal="#create-account-modal" data-reveal-id="create-account-modal"></a>
</li>
I cannot change id of the list item. I have two option
I can add one more class in list item to differentiate which to show
and which to hide.
or i can put each list item in separate div with some id and based
on that div's id i can show or hide.
which one is good 1) or 2)??
Is there any best option??
$('#submit').click(function() {
$(this).prev('#hideme').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<input type='button' id='hideme' value='hide me'>
<input type='button' id='submit' value='submit'>
</div>
Description: Display or hide the matched elements.
Documentation here
You can use .toggle() to hide/show element by using id as selector make sure you use unique id at all times
$('#clickme').click(function() {
$(this).parent().find('#hideme').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li id="hideme">
hide me
</li>
<li id="clickme" >
<a class="btn" href="#" id="">click me</a>
</li>
</ul>
Hide/show li you should have unique id as always and use proper selector to select the li you want to show or hide
So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.
The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.
There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.
My HTML is:
<!-- coaches box -->
<div class="box">
<div class="heading">
<h3 id="coaches-heading">Coaches</h3>
<a id="coaches" class="filter-align-right">clear all</a>
</div>
<ul id="coaches-list" class="list">
<li><span>Hue Jackson<a class="close"></a></span></li>
<li class="red"><span>Steve Mariuchi<a class="close"></a> </span></li>
</ul>
</div>
<!-- players box -->
<div class="box">
<div class="heading">
<h3 id="players-heading">Players</h3>
<a id="players" class="filter-align-right">clear all</a>
</div>
<ul id="players-list" class="list">
<li><span>Steve Young<a class="close"></a></span></li>
<li><span>Gary Plummer<a class="close"></a></span></li>
<li><span>Jerry Rice<a class="close"></a></span></li>
</ul>
</div>
My remove tag function in jQuery is:
function removeSingleTag() {
$(".close").click(function() {
var $currentId = $(".close").closest("ul").attr("id");
alert($currentId);
// find the closest li element and remove it
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
return;
});
});
}
Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:
var $currentId = $(".close").closest("ul").attr("id");
It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>
If I change that to:
var $currentId = $(".close").parents("ul").attr("id");
It has the same behavior as above, but alerts 'players-list', instead.
So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.
Anyone know what is going on with this whacky behavior?
It's expected behavior.
You should use:
var $currentId = $(this).closest("ul").attr("id");
$(this) points at the clicked .close.
$(".close") points at the first one found.
It's because you run that selector from click handler you should use this instead:
var $currentId = $(this).closest("ul").attr("id");
Try using this function to get the parent:
var $currentId = $(this).parents().first();
I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.
You also need to make it so that it selects the current element by using $(this)