I have a html structure. I want to get all controltypeid value in a function. I just try like
$('#firstDiv > a.[controltypeid]').each(function (i, val) {
$Control = $(val);
});
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>
but I can't get the value.Can any one help. Thanks in advance for help.
Done using jquery children selector.
Description :Get the children of each element in the set of matched elements.
Code :
$(document).ready(function(){
$("#firstDiv").children('a[controltypeid]').each(function(){
alert($(this).attr('controltypeid'))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>
You could also use simply like this
$('#firstDiv a').each(function () {
alert($(this).attr('controltypeid'));
});
Try this if you need your controltypeid in a array:
var controltypeid = [];
$('#firstDiv > a[controltypeid]').each(function (i, v) {
controltypeid.push($(v).attr( "controltypeid" ));
});
console.log(controltypeid);
Did everyone forget about .map?
Example:
var controlTypeIds = $('#firstDiv').children().map(function() {
return $(this).attr('controltypeid');
}); // ['1', '2', '3']
Or, if you want to continue using your selector, remove the extra .. The . selector selects class, but having a attribute selector right after it .[...] makes no sense and is not syntactically correct.
var controlTypeIds = $('#firstDiv>a[controltypeid]').map(function() {
return $(this).attr('controltypeid');
}); // ['1', '2', '3']
a.[controltypeid] is wrong and is replaced by a[controltypeid]
secondly, use attr() to get the attribute value.
$('#firstDiv > a[controltypeid]').each(function () {
console.log( $( this ).attr( "controltypeid" ) );
});
if you just want to get all the values in a string
var controltypeids = [];
$('#firstDiv > a[controltypeid]').each(function () {
controltypeids.push( $( this ).attr( "controltypeid" ) );
console.log( $( this ).attr( "controltypeid" ) );
});
alert( controltypeids.join( "," ) );
You can get following way using JQuery. using attr
Make following changes in Jquery.
$('#firstDiv > a').each(function () {
alert($(this).attr('controltypeid'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>
Related
I'm trying to push multiple values into an array based on the elements ID.
I expect the outcome to be 3 and 4 but instead I get 1 2 3 4. Why is that the case in the following example?
var myArray = [];
$( '#bla' ).each( function() {
myArray.push( {
test: $( this ).text(),
});
});
console.log( myArray );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>1</div>
<div>2</div>
<div id="bla">3</div>
<div id="bla">4</div>
</div>
You are seeing the content of the your HTML, and not the console.log.
This is what you need to fix:
Include jQuery
Use class instead of id - there can be only one id in a document, so you'll get only one result
Look at the console
var myArray = [];
$( '.bla' ).each( function() {
myArray.push( {
test: $( this ).text(),
});
});
console.log( myArray );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>1</div>
<div>2</div>
<div class="bla">3</div>
<div class="bla">4</div>
</div>
First id has to be unique
replace id with class and use your snippet
var myArray = [];
$( '.bla' ).each( function() {
myArray.push( {
test: $( this ).text(),
});
});
console.log( myArray );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>1</div>
<div>2</div>
<div class="bla">3</div>
<div class="bla">4</div>
</div>
First of all, you can't have two HTML elements with same id attribute. It is unique indeficator, it should be only one on page.
And second, if you are using your js script from external (not inluded between <scritp></script>) you should use (document.ready or in jQuery $(docuemnt).ready(function(){}) [in my case it is short way to do this]), because you don't want to read HTML values before your is not loaded.
(function () {
var myArray = [];
$( '.bla' ).each( function() {
myArray.push( {
test: $( this ).text(),
});
});
console.log( myArray );
}());
<div>
<div>1</div>
<div>2</div>
<div class="bla">3</div>
<div class="bla">4</div>
</div>
How can i get id of list item onclick of anchor. I want to display id of list item via Javascript alert. Here is my source:
Since you use jquery, use parent() and attr() functions:
function myClickFunction(){
var id = $(this).parent().attr("id");
};
You can use .parent() and .attr() or [0].id as follows:
$('.child').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
});
You would do well not to use inline JS.
$(function() {
$('ul a').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
alert( id );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="li1"><a>Click1</a></li>
<li id="li2"><a>Click2</a></li>
<li id="li3"><a>Click3</a></li>
</ul>
Use some thing like this ..
<script>
function myClickFunction(a){
var id = a.parentNode.id;
alert("I just clicked list item: " + id);
};
</script>
</head>
<body>
<ul>
<li id=li1"><a onClick="myClickFunction(this);">Click1</a></li>
<li id=li2"><a onClick="myClickFunction(this);">Click2</a></li>
<li id=li3"><a onClick="myClickFunction(this);">Click3</a></li>
</ul>
</body>
</html>
I have a selectable:
<ol id="selectable">
<li class="ui-widget-content">1</li>
<li class="ui-widget-content">2</li>
<li class="ui-widget-content">3</li>
</ol>
I want to capture every selected item body into a hidden input separated by a comma, so after selecting some items it would look for example like this:
<input type="hidden" id="bad_times" name="bad_times" value="1,3" />
where 1,3 are bodies of the items selected. Any examples from the web I tried failed to work. Please note that only selected items have to be captured, if I select some item, then unselect, then select again it should appear only once. How to achieve it?
Following assumes that jQuery UI selectable plugin is being used
If so you can try something like this and build on it
$(function() {
$("#selectable").selectable({
filter: "li" ,
unselected:mapSelected,
selected:mapSelected
});
});
function mapSelected(event,ui){
var $selected = $(this).children('.ui-selected');
var text = $.map($selected, function(el){
return $(el).text()
}).join();
$('#bad_times').val(text)
}
DEMO
What have you tried so far and where were you running into issues?
Based on the docs the selected items have the class 'ui-selected'
So you should just be able to iterate over the selected items something like:
var str = "";
$( ".ui-selected").each(function(i) {
if (i > 0)
str += ",";
str += $(this).text();
});
$('#bad_times').val(str);
I would be in favor of using a data attribute, say, data-value and using an array, [1,3], instead of a list 1,3.
Special Note: The demo and code below simply help to verify the concept and do not use the selectable plugin.
HTML:
<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />
JS:
$(function() {
var hidden = $('#bad_times');
$('#selectable li').on('click', function() {
var val = +$(this).text();
hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
console.log( hidden.data()['value'] );
});
});
$(function() {
var hidden = $('#bad_times');
$('#selectable li').on('click', function() {
var val = +$(this).text();
hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
$('pre.out').text( JSON.stringify( hidden.data()['value'] ) );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="selectable">
<li class="ui-widget-content">1</li>
<li class="ui-widget-content">2</li>
<li class="ui-widget-content">3</li>
</ol>
<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />
<pre class="out"></pre>
<div id="subjectissueref"><div id="subjectissue">
<div title="myDivTitle" class="cbs-Line1Link ms-displayBlock"id="ctl00_PlaceHolderMain_g_9913c0d3_0331_4643_8d90_82268670a0f7_csr1_2lines_line1">
<b>Subject :</b> myDivTitle</div>
<div title="anotherDivTitle" class="cbs-Line1Link ms-displayBlock"id="ctl00_PlaceHolderMain_g_9913c0d3_0331_4643_8d90_82268670a0f7_csr1_2lines_line6"
><b>Issue :</b> anotherDivTitle</div></div>
<div title="53" class="cbs-Line1Link ms-displayBlock" id="ctl00_PlaceHolderMain_g_9913c0d3_0331_4643_8d90_82268670a0f7_csr1_2lines_line7" style="float: right;">
<b>Ref :</b> #53</div></div>
I have this bit of code, and I want to use javascript to find the element where title equals myDivTitle
$('#subjectissureref').find('div[title=myDivTitle]')
Try this:
$("div[title='myDivTitle']") // This will get div element
Try this:
elem = $("div[title='myDivTitle']");
or
elem = $("div").prop('title', 'myDivTitle');
FIDDLE
$("div").each(function(){
if($(this).prop('title')=="myDivTitle"){
alert( "This div has title as myDivTitle");
}
});
Alternatively you can use jQuery.filter(...) with a custom function to get some special selections e.g.:
jQuery(document).ready(function() {
jQuery('#subjectissueref .cbs-Line1Link').filter(function(index, elem) {
return jQuery(elem).attr('title') == 'anotherDivTitle';
}).css('background-color', 'green');
});
But in your case this is the shortest solution:
jQuery(document).ready(function() {
jQuery('#subjectissueref div[title="myDivTitle"]').css('background-color', 'red');
});
Try it out here: http://jsfiddle.net/algorhythm/1o1hjw61/
I'm trying to find the deepest element in the specified divwith jquery. But the code which used is producing the error TypeError: parent.children is not a function.
I found this code from this link
the code is :
function findDeepestChild(parent) {
var result = {depth: 0, element: parent};
parent.children().each( //Here I getting the error TypeError: parent.children is not a function
function(idx) {
var child = $(this);
var childResult = findDeepestChild(child);
if (childResult.depth + 1 > result.depth) {
result = {
depth: 1 + childResult.depth,
element: childResult.element};
}
}
);
return result;
}
---------------------------------------------------------------------------------------
$(document).on('keypress','#sendComment', function(e) {
if(e.keyCode==13){
var itemId=$('#findbefore').prev('.snew').attr('id');//
var item=findDeepestChild(itemId);
alert(item);
}
});
And my divs are :
<div id="S04" class="snew" style="display: block;">
<div class="author-image"></div>
<span>xyz shared the image xyz</span>
<div class="s-content">
<div class="s-message"></div>
<div class="shpicture">
<img class="SharedImage" width="100%" height="100%" data-shareid="1" data-alid="1" data-id="1" alt="xyz" src="data:image/jpeg;base64,">
</div>
</div>
</div>
<div class="SPcommentbox">
<div class="comment">
<div class="commenter-image"></div>
<div class="addcomment">
<input class="commentbox" type="text" placeholder="Write a comment...">
</div>
</div>
</div>
I need to find the img from these.
please anyone help me .... Thanks ...
To get the deepest nested elements, use
$("#" + parent).find("*").last().siblings().addBack()
http://jsfiddle.net/6ymUY/1/
you can then get the id data attribute with
item.data("id")
http://jsfiddle.net/6ymUY/2/
full code:
function findDeepestChild(parent) {
return $("#" + parent).find("*").last().siblings().addBack();
}
var item=findDeepestChild("S04");
console.log(item)
console.log(item.data("id"));
You're calling it with a string, but it's expecting a jQuery instance.
Instead of
var itemId=$('#findbefore').prev('.snew').attr('id');//
var item=findDeepestChild(itemId);
you probably want
var item=findDeepestChild($('#findbefore').prev('.snew'));
You are passing in itemId, which is the ID attribute of a given element. I think what you meant to pass was the element itself. Just remove the attr call, leaving this:
var item = findDeepestChild($("#findbefore").prev(".snew"));