javascript - Alternative to nth-child approach in automatic css selector generation -

-

i facing problem while making logic automatic generation of css path of element in web page.

use-case: when user clicks on element on web page, css selector generated automatically using css selector concepts id-name, class-name, tag-name, , nth-child.

for ex: lets click on price element on e-commerce product description page, body > ul:nth-child(27) > li:nth-child(1). biggest bane here nth-child(1), because page price 1st child, other pages 4th or 5th or 23rd child. moreover, bigger problem html of price element 

<html>     ....     <body>           <div>abc</div>           <div>def                <span>ghi</span>                <ul>                    <li> price: $32.23 </div>                    <li> weight: 100 lbs </div>                  </ul>           </div>    </body> </html>

without classname or id-name. current selector generation logic generates lot of combinations of selectors selects selector unique.

please me!

 <span class='product'>cheese</span>            <ul class='product-details' >                <li class='price' id='cheese-price'> price: $32.23 </li>                <li class='weight' id='cheese-weight'> weight: 100 lbs </li>              </ul>  <span class='product'>apple</span>            <ul class='product-details' >                <li class='price' id='apple-price'> price: $2.23 </li>                <li class='weight' id='apple-weight'> weight: 1 lbs </li>              </ul>

my concept add classes classify , make unique ids based on product name , -price or -weight suffixes, ex.: cheese-price. might use jquery functions identify elements class or end of attribute name: -price

because page price 1st child, other pages 4th or 5th or 23rd child.

if click on price: $23.32, js function read textcontent inside li element

i click on price element on e-commerce product description page

...but no database in involved here. web page , dom

do generate css selectors on server side or thru js function upon user click? if later, in wrong sphere.

update

since try add css selectors on client side (after receiving html page), suggestion grab hole page, save locally , process regex based on words price , weight. ex.: /price:\s+\$([\.\d]+)/g

see working demo.


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea
Read more

python - build a suggestions list using fuzzywuzzy -

-
i building suggestion engine database. i'm using fuzzywuzzy module match user input string existing database shown below. if request.method == "get": display_dict = {} user_input = request.get["user_input"] # user input match_dict = {} food_items_obj = food_items.objects.all() # fetch objects table items in food_items_obj : match = fuzz.ratio(user_input.lower(),items.name.lower()) # try match user input existing names match_dict[match] = items.name # put 1 dictionary matched_dict = ordereddict(sorted(match_dict.items(),reverse = true)) # sort dictionary if max(matched_dict.keys()) == 100: # if exact match put in dict , return display_dict[100] = matched_dict[100] else : # if not found try best matching words.. ###########this part need help! ############# k,v in matched_dict.items(): if user_input in v : display_dict[k]
Read more