Develop Reference

Select element with particular data attributes with jQuery

How can I select element with particular data attribute and special class with jQuery please ?
For example, I would like to select these elements:
<div data-roomid="55" data-status="NoData"></div>
<div data-roomid="55" data-status="Open"></div>
<div data-roomid="55" data-status="Close"></div>
But not this one:
<div data-roomid="55" data-status="Book"></div>
My try is the following one:
roomid = 55;
$('[data-roomid="'+ roomid +'"]').each(function(e) {
});
Thanks.

You can use :not selector - see demo below:
var roomid = 55, status = 'Book';
$('[data-roomid="' + roomid + '"]:not([data-status=' + status + '])').each(function() {
$(this).css({
color: 'blue'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-roomid="55" data-status="NoData">NoData</div>
<div data-roomid="55" data-status="Open">Open</div>
<div data-roomid="55" data-status="Close">Close</div>
<div data-roomid="55" data-status="Book">Book</div>

Is this what you're looking for?
$('div:not([data-status=Book])[data-roomid='+ roomid +']')

Finding value of checkbox in dynamically created element

So, I'm writing some JS which dynamically creates some DOM elements. Below is a structure of the elements created:
<div class='list_item' key='1'>
<p>Hello, World!</p>
</div>
<div class='cont' key='1'>
<input type='checkbox' name='test'/>
</div>
When an event is triggered, I want to loop through all .list_item, and find their corresponding .cont, using the key attribute as an identifier. I want to find the value of the .cont > input[type="checkbox"].
Here's my code so far:
$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
console.log(x);
});
Instead of getting a true or false response, my code throws undefined as its result. What can I do to my code to get the response I want (the value of the checkbox)?
Thanks

Two problems:
You forgot to close the attribute selector
You forgot the . before cont in the class selector
So:
$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
// ------------^--------------------------------------^
console.log(x);
});
Note that you can do that with a single selector rather than find:
$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
console.log(x);
});
Example:
$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
console.log(x);
});
<div class='list_item' key='1'>
<p>Hello, World!</p>
</div>
<div class='cont' key='1'>
<input type='checkbox' name='test' />
</div>
<div class='list_item' key='2'>
<p>Hello, World!</p>
</div>
<div class='cont' key='2'>
<input type='checkbox' name='test' />
</div>
<div class='list_item' key='3'>
<p>Hello, World!</p>
</div>
<div class='cont' key='3'>
<input type='checkbox' name='test' checked/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I see that your selector is wrong. The class dot is missing. Try with this:
$('.cont[key="' + $(this).attr('key') + '"')

you just missed '.' before class selector
$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
console.log(x);
});

wrapInner() with href of children elements

I have next structure - there are 7 blocks:
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="..."></a>
</div>
</div>
I want to receive href of the inner link, delete its parent block with link and add a link inside block with class="blog-item" with the same href as deleted link...
I had wrote this:
<script>
jQuery(document).ready(function() {
jQuery(".blog-item a.readmore-link").each(function() {
var ahref = jQuery(this).attr("href");
jQuery(this).parent('.jcomments-links').remove();
jQuery(this).parent().closest('.blog-item').wrapInner(function () {
return "<a href='" + ahref + "'></a>"
});
});
});
</script>
But something wrong. There will not appear new link. Any help will be greatly appreciated. Thanks

Try this (run the snippet to see it work, and you'll have to use the inspector to see that the html is correct):
jQuery(document).ready(function ($) {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href"),
$wrapItem = $(this).closest('.blog-item');
$(this).closest('.jcomments-links').remove();
$wrapItem.wrapInner('<a href="' + ahref + '"/>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-item">
<h2>Heading</h2>
<p>Paragraph</p>
<div class="jcomments-links">
remove
<a class="readmore-link" href="http://www.example.com">example</a>
</div>
</div>

its because you are deleting $(this) when you remove the .parent('.jcomments-links') from the DOM, so the reference to add the <a> to the .blog-item has not reference when you say $(this).closest() cause there is no more $(this).
try this:
$(document).ready(function() {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href");
$(this).closest('.blog-item').append("<a href='" + ahref + "'>This is my new link</a");
$(this).parent('.jcomments-links').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="this-is-my-href-i-want">This is the Link woo woo</a>
</div>
</div>

from title to data-* by jQuery?

I have a div element
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>
After magic jQuery script I want that it will be like that
<div class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>
So I tried to manipulate with this
<script>
$( document ).ready(function() {
$("[title*='space']").each(function() {
var title = $(this).attr('title');
var titleArray = title.split(" ");
$(this).attr("data-enter", titleArray[1]);
$(this).attr("data-exit", titleArray[2]);
$(this).attr("data-duration", titleArray[3]);
$(this).removeAttr('title');
});
});
</script>
But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that
<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>
But I don't want it.
Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this.
Thanks. I hope you understood my question.

I think this is job for regular expressions. Something like this:
$("[title*='space']").each(function() {
var title = this.title,
enter = this.title.match(/enter=(.*?)(\s|$)/),
exit = this.title.match(/exit=(.*?)(\s|$)/),
duration = this.title.match(/dur=(.*?)(\s|$)/)
$(this).attr("data-enter", enter[1]);
$(this).attr("data-exit", exit[1].replace(/,/, ' '));
$(this).attr("data-duration", duration[1]);
$(this).removeAttr('title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

jQuery basic: How to create a loop with this structure?

This is a really simple question but I'm not sure how to search for it on the internet.
I have an empty <div id="wrap"></div> that needs to end up looking as following:
<div id="wrap>
<div class="container">
<div class="apples"></div>
</div>
<div class="container">
<div class="banana"></div>
</div>
<div class="container">
<div class="orange"></div>
</div>
<div class="container">
<div class="grapes"></div>
</div>
</div>
In jquery I have:
$(#wrap).html(''); // need this bit
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'"></div>').appendTo('#wrap').doSomething();
}
Because I need the div with the fruitArray class to do something, I can't just wrap it around with the container class:
$('<div class="container"><div class="'+fruitArray[fruit]+'"></div></div>').appendTo...
How can I go about generating the container class in this situation?

The .wrap method returns the original set of elements for chaining purposes.
$('<div class="'+fruitArray[fruit]+'" />')
.appendTo('#wrap')
.wrap('<div class="container" />')
.doSomething();

Try this:
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="' + fruitArray[fruit] + '"></div>').appendTo('#wrap').wrap('<div class="container"></div>');
}
Example fiddle

var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'" />').wrap('<div class="container" />').appendTo('#wrap').doSomething();
}
OR you can also do it like
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'" />').appendTo('#wrap').doSomething().wrap('<div class="container" />');
// this will work if the doSomething is a jquery/plugin method that is using chaining (usually they do)
}