<div class="Name">
<div class="Image"></div>
<ul>
<li><h5><span class"myName">I want this text</span></h5></li>
<li class="description">The description</li>
</ul>
<button class="myButton">My Button</button
</div>
(multiple items with the same structure)
if my structure is constructed this way,
how can I get the class myName to have its content as a variable?
$(".myButton").click(function () {
var itemName = $(this).siblings(".myName").innerHTML ??
}
Ok, so the problem is that you have an error in you HTML. You have
<span class"myName">
instead of
<span class="myName">
and this makes all difference, because your class selector will not work property. Oh, you're also missing the ">" in the closing of button tag.
Here's the fixed HTML:
<div class="Name">
<div class="Image"></div>
<ul>
<li><h5><span class="myName">I want this text</span></h5></li>
<li class="description">The description</li>
</ul>
<button class="myButton">My Button</button>
</div>
And here's the jQuery that works with it:
$(".myButton").click(function() {
var itemName = $(this).parent().find('.myName').html();
alert(itemName);
});
You had missed the closing parenthesis as well...
I created a fiddler so you can test it: http://jsfiddle.net/juj3W/
Here is one way to get it:
$(".myButton").click(function () {
var itemName = $(this).parent().find(".myName").html();
}
var itemName = $(this).prev('ul').find('.myName').html();
try this:
$(".myButton").click(function () {
var itemName = $(".myName", $(this).parent()).text();
//find class in parent
}
Related
i have the following html example
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" dataid="73592"><div>
</div>
</div>
i am trying to get the dataid from teamcontainer but it keeps on returning undefined.This is what i tried
if ($this.hasClass("list") && $this.hasClass("Teamlist") && $this.hasClass("Teamcontainer")) {
var ID = $this.parents(".Teamcontainer").attr("dataid");
}
the above id just returns undefined. how do i get ID=73592? what am i doing wrong
Just use jquery selector like this:
var ID = $(".list .Teamlist .Teamcontainer").attr("dataid");
I hope it helps.
you can do it in 2 ways. first using attr as Michal answered above and 2nd if you change your dataid to data-id,, here are both the examples.
$(document).ready(function(){
//first way by Attr
var dataID = $(".list .Teamlist .Teamcontainer").attr("dataid");
console.log(dataID);
// second using data, but for this you need to change your attribut to data-id
var dataId = $(".list .Teamlist .Teamcontainer.OPEN").data("id");
console.log(dataId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer" dataid="73592"><div>
</div>
</div>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" data-id="73592"><div>
</div>
</div>
How to get previous all element class list using jquery.
Here is the Example.
<div>
<div>
<span class="one">one</span>
</div>
<div>
<span class="two">one</span>
</div>
<div>
<span class="three">one</span>
</div>
<div id="getclass">getclass</div>
<div>
<span class="four">one</span>
</div>
</div>
I want all the class names above in "getclass" id.
And i'm trying the below things.
var a = $("#getclass").prevAll().find('.class').attr('class');
How can i achive this using jquery.Anyone please Help me to fix this issue.
Your code is looking for elements with the class class.
You can instead get all children of previous siblings and then use the map function to convert this to an array with just class names by returning the className property.
Example:
var a = $("#getclass")
.prevAll()
.children("span")
.get()
.map(function(x) {
return x.className;
});
console.log(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<span class="one">one</span>
</div>
<div>
<span class="two">one</span>
</div>
<div>
<span class="three">one</span>
</div>
<div id="getclass">getclass</div>
<div>
<span class="four">one</span>
</div>
</div>
You can read each element through a loop:
<script type="text/javascript">
$(function () {
var classes = [];
$("#getclass").prevAll().each(function () {
classes.push($(this).find('span').attr('class'));
});
var classNames = classes.join(",");
alert(classNames);
});
classes is an array of class names, you can also get it as a CSV.
Based on the DOM tree below, I want to get all of the <p> element that are the child of every div with message as its class and put them all in an array. This will create an array of objects.
Note : ul and all of its children in all levels can be added dynamically to the dom at any given time.
How do I do that?
I have tried
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});
but no luck
DOM tree
<ul class="rightP">
<li>
<div class="sender">
<p>David</p>
</div>
<div class="message">
<p>Hello</p>
</div>
</li>
<li>
<div class="sender">
<p>Watson</p>
</div>
<div class="message">
<p>yes anything?</p>
</div>
<div class="message">
....
</li>
...
</ul>
You used wrong jQuery selector. Replace $('.rightP').('li>.message>p') with $('.message > p') or you could do it this way.
var messages = jQuery('.message > p');
jQuery.each(messages, function (index, elem) {
var message = jQuery(elem);
console.log(message.text())
});
Here's the working fiddle.
$('.rightP').('li>.message>p');
Wrong statement. You should try
$('.rightP').find('li>.message>p');
etc...
You can get all those like bellow
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});
I need to take the data-value from the image and put it on the hidden fields without using the hidden field's id.
Edit: I can't use the id's because the set repeats with a different Id.
<div class="optionImageSelection">
<input type="hidden" id="hdnIn">
<ul>
<li>
<img src="iamge1.jpg" data-value="val1" class="optionImageSelect">
</li>
<li>
<img src="image2.png" data-value="val2" class="optionImageSelect">
</li>
</ul>
</div>
<div class="optionImageSelection">
<input type="hidden" id="hdnIn2">
<ul>
<li>
<img src="iamge3.jpg" data-value="val3" class="optionImageSelect">
</li>
<li>
<img src="image4.png" data-value="val4" class="optionImageSelect">
</li>
</ul>
</div>
The jQuery:
function OptionImage(image) {
this.selectImage = function () {
//this works but it needs to be generic.
var hdnSelector = $("#hdnIn");
//this doesn't work but it's what I need
//var hdnSelector = $(image).parents('input:hidden:first');
$(hdnSelector).val($(image).attr("data-value"));
alert($(hdnSelector).val());
};
}
$(document).ready(function () {
$(".optionImageSelect").click(function () {
var oi = new OptionImage($(this));
oi.selectImage();
});
});
Js fiddle: http://jsfiddle.net/p4pMg/1/
Thank you.
Instead of
var hdnSelector = $("#hdnIn");
you can use this selector
var hdnSelector = $(image).closest('ul').prev('input')
You can use a combination of closest and prev
Check Fiddle
Use $('input[type=hidden]') selector.
Ok, lets see if I can explain this clearly enough here.
My HTML looks like
<li>
<div class="info_left" rel="snack">Fries</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="lunch">Burger</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="4thmeal">Taco</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
If you will note you will see a "Remove" and "Favorite" inside a div "info_right". What I need to do when either one of those 2 options is clicked on is get the rel and text values of the same li's "info_left" div. I've tried a few ways but don't think I'm nailing the combo between parent(s), siblings correctly or I dunno. Either way hoping someone can toss me a bone.
It should just be:
$('.info_remove,.info_favorite').on('click', function() {
var $left = $(this).parent().siblings('.info_left');
var rel = $left.attr('rel');
var txt = $left.text();
...
});
jsFiddle example
$(document).ready(function(){
$(".info_right span").click(function(){
$("#msg").html($(this).attr("class")+": "+$(this).parent().prev().attr("rel"));
})
})
try this
$('.info_remove,.info_favorite').click(function() {
var target_elem = $(this).parent().prev();
alert(target_elem.attr('rel'));
alert(target_elem.text());
});
fiddle : http://jsfiddle.net/ss37P/1/