텍스트로 요소 찾기

 

jQuery: find element by text

Can anyone tell me if it's possible to find an element based on its content rather than by an id or class? I am attempting to find elements that don't have distinct classes or id's. (Then I then n...

stackoverflow.com

ID  클래스가 아닌 내용을 기반으로 요소를 찾을 수 있는지 누구든지 말할 수 있습니까 ?

고유 한 클래스 나 ID가없는 요소를 찾으려고합니다. (그런 다음 해당 요소의 부모를 찾아야합니다.)

 

Therefore it is not enough that you use :contains() selector, you also need to check if the text you search for is the direct content of the element you are targeting for, something like that:

따라서 :contains() selector 를 사용하는 것으로는 충분하지 않습니다. 검색하는 텍스트 가 대상 요소  직접 콘텐츠 인지 확인해야 합니다.

 

 

 Element에 포함된 텍스트(Text)로 객체를 찾아라!

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

 * 아래 DIV   p-1 class 중에 텍스트가 3인 것을 찾아라. 

<div class="" id="pagenation" style="white-space: nowrap; overflow-x: hidden; width: 231px;">
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">1</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">2</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative  style="width:33px;height:33px;">3</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">4</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">5</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">6</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">7</div>
</div>


$(".p-1:contains('3')")
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 

www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements

www.w3schools.com

www.w3schools.com/cssref/trysel.asp

 

Try CSS Selector

Welcome to My Homepage My name is Donald Duck. I live in Duckburg I have many friends: Goofy Mickey Daisy Pluto All my friends are great! But I really like Daisy!! Ciao bella We are all animals! My latest discoveries have led me to believe that we are all

www.w3schools.com

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

SelectorExampleExample description

.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 

한 시간 만에 배우는 Jquery

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요