We Keep Coding

displaying specific text on tumblr [duplicate]

It looks like JQuery does the search in the current document when using a selector.
How to search for an element only inside a div element?

jQuery selectors work very much like CSS selectors, which you may be more familiar with.
First, select the div, and then descend from that:
$('#my-div').find('some-selector').
or build your selector to match children of the element in question:
$('#my-div some-selector')

Old question, but everyone seems to have missed the scoped jQuery selector (using the scope you desired, i.e. your div selector, as the second parameter)
e.g. use
var $matches = $('.adiv', '#mydiv');
This is a shorter equivalent of:
var $matches = $('#mydiv').find('.adiv');

var elems = jQuery(".foo", jQuery("#divYourWantToLimitTo") ); //BAD
//or
var elems = jQuery("#divYourWantToLimitTo .foo"); //Better
//or
var elems = jQuery("#divYourWantToLimitTo").find(".foo"); //BEST

jQuery provides several ways to search for specific elements:
$("#your_div").find(".your_things"); //Find everything inside
//-or-
$("#your_div").filter(".your_things"); //Find only the top level
//-or-
$("#your_div .your_things"); //Easiest

var elements = $('div ' + yourSearch);

$('div-selector').find('the selector-you-are-looking-for');

Select the child[ren] of an element as one would select the descendant[s]

Say I have an HTMLElement:
var hoop = otherLibrary.getHoop()
I can select its descentant[s] that are .stripey:
var stripedOnes = hoop.querySelectorAll('.stripey')
This is like the CSS rule:
#hoop .stripey {
However, how do I do the same for child[ren], without using jQuery?
var stripedChildren = hoop.querySelectorAll('> .stripey')
Doesn't work, although in jQuery/Sizzle it does. What would be the JS equivalent of this CSS rule?
#hoop > .stripey {

Well, the most straightforward way would be to use the full selector inside querySelectorAll()
document.querySelectorAll("#hoop > .stripey");
But, if answering your specific question...
I believe the fanciest way to select an element's children based on a selector is:
turn the .children collection into an array
Filter each element testing it against a selector using .matches()
So:
var hoop = document.getElementById("hoop");
var stripedChildren = [].slice.call(hoop.children).filter(function(element) {
return element.matches(".stripey");
});

You can use following -
document.querySelectorAll("#hoop > .stripey");

Javascript or JQuery string get substring with certain prefix

I have an element with many classes, I would like to access a specific class to get the last digit of it (I realize a data-attribute or ID may have been better options but for now I am stuck with class). I already am able to select the element using it's ID so I only need to identify what the last digit of the my-target-* is.
Example
<div class="foo bar apple my-target-1"></div>
I would like to get the class my-target-* and then extract the 1 from it.

Loop over all the elements containing 'my-target', assuming it is the last class, split the classes by space, get the last class, split it by '-' then get the needed value to extract.
Here is a working example:
$(document).ready(function(){
$("[class*= my-target]").each(function(){
var extract= $(this).attr('class').split(' ').pop().split('-').pop();
$("#result").html(extract);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo bar apple my-target-1"></div>
<span id="result"></span>

Here's a jQuery selector that should target your element:
$("[class*=my-target]");
But this may be more general than you need: this uses the CSS substring selector *=, so this would also match elements like the following:
<div class="not-my-target"></div>
You can try a combination of selectors to get something more specific:
$("[class^=my-target], [class*= my-target"]);
This combines the CSS starts with selector, with the contains.
Now to grab the data that you want from the class name you'll need to do some string parsing on the class attribute:
var numberToExtract = -1;
var elem = $("[class*=my-target-]");
if (elem)
{
classes = elem.attr("class").split(/\s+/);
$.each(classes, function(idx, el)
{
if (el.startsWith("my-target-"))
{
numberToExtract = el.split("-").pop();
return false;
}
});
}

Maybe is neater if you use a data element to do this
<div class="foo bar apple my-target-1" data-target="1"></div>
And you get this by doing:
$('.my-target-1').data('target')
It's better than parsing the class

To get any one starting with those classes try this
$('div[id^=foo bar apple my-target]')

If you're stuck using a class instead of a data attribute, you can extract the full string of classes from the object you've found with:
obj.attr('class')
and then match that against a regular expression that uses word boundaries and capturing parentheses to extract the number at the end of 'my-target-*'

You must have ID to catch the particular div or span content.
Be Careful , Perhaps , you have a class and a subclass .
<div id='id' class='myclass mysubclass' >Testing</div>
So if you want to have the class selector, do the following :
var className = '.'+$('#id').attr('class').split(' ').join('.')
and you will have
.myclass.mysubclass
Now if you want to select all elements that have the same class such as div above :
var class=$('.'+$('#id').attr('class').split(' ').join('.'))
that means
var class=$('.myclass.mysubclass')
If you want second class into multiple classes using into a element
var class_name = $('#id').attr('class').split(' ')[1];`
or You can simply use var className = $('#id').attr('class'); this will return full name class and subclass then handle it using JQuery/JavaScript substring method.

How can I combine these jQuery statements?

I have a jQuery statement like this;
var current = $(this);
current.hide();
current.siblings('.ab').hide();
current.siblings('.cd').hide();
I want to change this into a single statement and I wrote;
$(current,current.siblings('.ab'),current.siblings('.cd')).hide();
But ab is not hiding. How can I combine the 3 hide() statements into one?

You can use a multiple selector and addBack():
$(this).siblings(".ab, .cd").addBack().hide();
addBack() will add the original element back into the set, so you can get both the element and its relevant siblings in the same jQuery object.

You can use a multiple selector (comma separated) for the siblings function and than use addBack to include the first element.
Add the previous set of elements on the stack to the current set,
optionally filtered by a selector.
Code:
current.siblings(".ab, .cd").addBack().hide();

Try to use .end(),
current.siblings(".ab, .cd").hide().end().hide();
or use .add() like below,
current.add(current.siblings(".ab, .cd")).hide();

try this:
var current = $(this);
current.hide().siblings('.ab').hide().end().siblings('.cd').hide();

You can use comma separated multiple selectors in .siblings()
current.siblings('.cd,.ab').addBack().hide();
Working Demo

Addition of two sets of selectors in one

I want to add to sets of selectors to one set.
For example:
$("div") gives me all sets of div and $("span") gives me all sets of span.
Now I want to add them to form one set of selectors which contain all spans and divs.
Avoid to advice for adding class, I need to merge this two sets only.

You can use add method.
$('div').add('span').DoYourStuffWithBoth();
or
var divs = $('div');
var spans = $('span');
divs.add(spans).DoYourStuffWithBoth();

You can combine multiple selector using comma between them like this
$("div, span")

jQuery selectors are basically css selectors. You combine two selectors by comma separation:
$("span, div");

You could just run the combined selector:
jQuery('div, span')

How about:
$('div, span')
Should give you a set of elements with both div's and span's