I have following html that is being rendered and I would like to check if there is specific text (All documentation, requests and payments) inside the li. my html is
<div tabindex="0" style="background-color: rgb(255, 255, 0);"
title="All documentation, requests and payments, Final documentation">
<ul tabindex="-1"
aria-label="Selected values for Student Responsibilities"
aria-activedescendant="value-selected-item-1">
<li
name="value-selected-item-1" aria-describedby="value_selecteditems_instructions"
id="value-selected-item-1"
tabindex="-1"
title="" data-value="0"
aria-label="All documentation, requests and payments for Student Responsibilities">
<span >All documentation, requests and payments</span>
<button tabindex="-1" name="value-selected-item-delete-1" aria-
label="Remove All documentation, requests and payments">
<span ></span></button>
</li>
<li name="value-selected-item-2"
aria-describedby="value_selecteditems_instructions"
id="value-selected-item-2"
tabindex="-1"
title=""
data-value="1" aria-label="Final documentation for Student Responsibilities">
<span >Final documentation</span>
<button tabindex="-1" name="value-selected-item-delete-2"
aria-label="Remove Final documentation">
<span ></span></button>
</li>
</ul>
<div >
<button tabindex="-1" aria-hidden="true" type="button" aria-label="Show 2 more selected items"> 2</button>
</div>
</div>
this is what I am trying to do to get it but it always returns true , which is not correct
if($('span:contains("All documentation, requests and payments")','ul.msos-selecteditems msos-current-selection-normal').length == 0) {
console.log('Found');
} else {
console.log('no Found');
}
CodePudding user response:
You forgot a dot between the two classes: $('span:contains("All documentation, requests and payments")','ul.msos-selecteditems
.
msos-current-selection-normal')
-
console.log('Found elements:', Array.from($('span:contains("All documentation, requests and payments")','ul.msos-selecteditems.msos-current-selection-normal')))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div tabindex="0" style="background-color: rgb(255, 255, 0);"
title="All documentation, requests and payments, Final documentation">
<ul tabindex="-1"
aria-label="Selected values for Student Responsibilities"
aria-activedescendant="value-selected-item-1">
<li
name="value-selected-item-1" aria-describedby="value_selecteditems_instructions"
id="value-selected-item-1"
tabindex="-1"
title="" data-value="0"
aria-label="All documentation, requests and payments for Student Responsibilities">
<span >All documentation, requests and payments</span>
<button tabindex="-1" name="value-selected-item-delete-1" aria-
label="Remove All documentation, requests and payments">
<span ></span></button>
</li>
<li name="value-selected-item-2"
aria-describedby="value_selecteditems_instructions"
id="value-selected-item-2"
tabindex="-1"
title=""
data-value="1" aria-label="Final documentation for Student Responsibilities">
<span >Final documentation</span>
<button tabindex="-1" name="value-selected-item-delete-2"
aria-label="Remove Final documentation">
<span ></span></button>
</li>
</ul>
<div >
<button tabindex="-1" aria-hidden="true" type="button" aria-label="Show 2 more selected items"> 2</button>
</div>
</div>
CodePudding user response:
with $('li').attr("aria-label") you can get a string with the text from aria-label, then you can see if that string contains what you want. ex:
if($('li').attr("aria-label").indexOf("All documentation, requests and payments")!=-1){
console.log('Found');
} else {
console.log('no Found');
}