locked
Jquery wild card selector RRS feed

  • Question

  • User264732274 posted

    here are 3 syntax

    $("div[id^='content']").each(function() {});  ^ start with
    $("div[id$='content']").each(function() {});   $ end with
    
    $("div[id*='content']").each(function() {});   * This will select the given string anywhere in the id
    1) what is the meaning of below syntax. in below syntax * and $ both has been used.......what does it means ?
    $("*[id$='btnNext']").click(function () {
            // Do Magic here
    }); 
    2) in below code both * and ~ both has been used what is the meaning of * and ~ ?
    
    $("*[class~='integer']").each(function () {
            $(this).formatIntegerField($(this).val());
    }); 

    what is the meaning of this symbol ~ and [class~='integer']" ?

    3) what is the meaning of below selector

    <div class="mark-as-unread otherClass">   Book 1   </div>
    <div class="mark-as-reading otherClass">   Book 2   </div>
    <div class="mark-as-read otherClass">   Book 3   </div>
    <div class="mark-as-not-interested otherClass">   Book 4   </div>
    
    div[class*='-read'] {color:blue; }
    div[class*='-read '] {text-decoration:line-through;}
    div[class*='mark-as'] {font-style:italic; }
    .otherClass {font-size:200%;}
    [attribute=value] 	[target=_blank] 	Selects all elements with target=”_blank” 	2
    [attribute~=value] 	[title~=nickfever] 	Selects all elements with a title attribute containing the word “nickfever” 	2
    [attribute|=value] 	[lang|=en] 	Selects all elements with a lang attribute value starting with “en”
    
    http://www.w3schools.com/jquery/jquery_ref_selectors.asp

    4) tell me what is the meaning of $("div > p"). All <p> elements that are a direct child of a <div> element

    $("div  p") All <p> elements that are descendants of a <div> element
    what they are try to say direct child of div and descendants of a <div> element ? can anyone discuss this child of div and descendants of a <div> issue with example.

    thanks

    Thursday, December 31, 2015 11:23 AM

Answers

  • User281315223 posted

    1) what is the meaning of below syntax. in below syntax * and $ both has been used.......what does it means ?
    $("*[id$='btnNext']").click(function () {
            // Do Magic here
    }); 

    The wildcard selector (*) is really not going to have an effect here (it's generally only useful when used on it's own). When you use it with an additional selector like the ID Ends With selector, it will essentially do the same thing (only selecting elements that ends with an ID of 'btnNext').

    2) in below code both * and ~ both has been used what is the meaning of * and ~ ?
    
    $("*[class~='integer']").each(function () {
            $(this).formatIntegerField($(this).val());
    }); 

    what is the meaning of this symbol ~ and [class~='integer']" ?

    Again, the wildcard selector doesn't really have any effect here. However the '~=' when used in this context is referred to as a the "contains" selector, so it would select any elements that contained the phrase 'integer'.

    3) what is the meaning of below selector

    <div class="mark-as-unread otherClass">   Book 1   </div>
    <div class="mark-as-reading otherClass">   Book 2   </div>
    <div class="mark-as-read otherClass">   Book 3   </div>
    <div class="mark-as-not-interested otherClass">   Book 4   </div>
    
    div[class*='-read'] {color:blue; }
    div[class*='-read '] {text-decoration:line-through;}
    div[class*='mark-as'] {font-style:italic; }
    .otherClass {font-size:200%;}
    [attribute=value] 	[target=_blank] 	Selects all elements with target=”_blank” 	2
    [attribute~=value] 	[title~=nickfever] 	Selects all elements with a title attribute containing the word “nickfever” 	2
    [attribute|=value] 	[lang|=en] 	Selects all elements with a lang attribute value starting with “en”
    
    http://www.w3schools.com/jquery/jquery_ref_selectors.asp

    What selectors are you referring to? You seem to have some CSS-based selectors in here as well, which although may often be similar, they may not always be able to be used in the same ways.

    4) tell me what is the meaning of $("div > p"). All <p> elements that are a direct child of a <div> element

    You seem to already have this one. It would target <p> elements that are directly below any <div> elements : 

    <div>
        <p>This would be selected</p>
        <article>
            <p>This would not be selected (as it isn't a direct child of a <div>)</p>
        </article>
    </div>

    $("div  p") All <p> elements that are descendants of a <div> element
    what they are try to say direct child of div and descendants of a <div> element ? can anyone discuss this child of div and descendants of a <div> issue with example.

    Using the previous example, the '>' will only target direct children of the parent, however using a space will target any descendants and not just direct children, so it would have the following effect:

    <div>
        <p>This would be selected</p>
        <article>
            <p>This would be selected</p>
        </article>
    </div>


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 31, 2015 2:00 PM
  • User281315223 posted

    [target=_blank]

    This would match any elements with a target attribute of "_blank" :

    <a href='http://www.asp.net' target='_blank'>Visit ASP.NET</a>

    [title~=nickfever] what this ~ symbol does ?

    This would match any elements that had the phrase "nickfever" in the title attribute :

    <span title='I do not know what nickfever is, but I like it'>Nickfever: An untold story.</span>

    [lang|=en]

    Finally, this would match any elements that have a lang attribute that start with or are equal to "en" :

    <p lang='en'>
        This should be in English.
    </p>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 31, 2015 6:22 PM

All replies

  • User281315223 posted

    1) what is the meaning of below syntax. in below syntax * and $ both has been used.......what does it means ?
    $("*[id$='btnNext']").click(function () {
            // Do Magic here
    }); 

    The wildcard selector (*) is really not going to have an effect here (it's generally only useful when used on it's own). When you use it with an additional selector like the ID Ends With selector, it will essentially do the same thing (only selecting elements that ends with an ID of 'btnNext').

    2) in below code both * and ~ both has been used what is the meaning of * and ~ ?
    
    $("*[class~='integer']").each(function () {
            $(this).formatIntegerField($(this).val());
    }); 

    what is the meaning of this symbol ~ and [class~='integer']" ?

    Again, the wildcard selector doesn't really have any effect here. However the '~=' when used in this context is referred to as a the "contains" selector, so it would select any elements that contained the phrase 'integer'.

    3) what is the meaning of below selector

    <div class="mark-as-unread otherClass">   Book 1   </div>
    <div class="mark-as-reading otherClass">   Book 2   </div>
    <div class="mark-as-read otherClass">   Book 3   </div>
    <div class="mark-as-not-interested otherClass">   Book 4   </div>
    
    div[class*='-read'] {color:blue; }
    div[class*='-read '] {text-decoration:line-through;}
    div[class*='mark-as'] {font-style:italic; }
    .otherClass {font-size:200%;}
    [attribute=value] 	[target=_blank] 	Selects all elements with target=”_blank” 	2
    [attribute~=value] 	[title~=nickfever] 	Selects all elements with a title attribute containing the word “nickfever” 	2
    [attribute|=value] 	[lang|=en] 	Selects all elements with a lang attribute value starting with “en”
    
    http://www.w3schools.com/jquery/jquery_ref_selectors.asp

    What selectors are you referring to? You seem to have some CSS-based selectors in here as well, which although may often be similar, they may not always be able to be used in the same ways.

    4) tell me what is the meaning of $("div > p"). All <p> elements that are a direct child of a <div> element

    You seem to already have this one. It would target <p> elements that are directly below any <div> elements : 

    <div>
        <p>This would be selected</p>
        <article>
            <p>This would not be selected (as it isn't a direct child of a <div>)</p>
        </article>
    </div>

    $("div  p") All <p> elements that are descendants of a <div> element
    what they are try to say direct child of div and descendants of a <div> element ? can anyone discuss this child of div and descendants of a <div> issue with example.

    Using the previous example, the '>' will only target direct children of the parent, however using a space will target any descendants and not just direct children, so it would have the following effect:

    <div>
        <p>This would be selected</p>
        <article>
            <p>This would be selected</p>
        </article>
    </div>


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 31, 2015 2:00 PM
  • User264732274 posted

    tell me the meaning of below selector

    [target=_blank]
    [title~=nickfever] what this ~ symbol does ?
    [lang|=en]

    Thursday, December 31, 2015 2:19 PM
  • User281315223 posted

    [target=_blank]

    This would match any elements with a target attribute of "_blank" :

    <a href='http://www.asp.net' target='_blank'>Visit ASP.NET</a>

    [title~=nickfever] what this ~ symbol does ?

    This would match any elements that had the phrase "nickfever" in the title attribute :

    <span title='I do not know what nickfever is, but I like it'>Nickfever: An untold story.</span>

    [lang|=en]

    Finally, this would match any elements that have a lang attribute that start with or are equal to "en" :

    <p lang='en'>
        This should be in English.
    </p>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 31, 2015 6:22 PM