querySelector div < child // .class[dataField]

I'm not really well educated in jQuery, but I need a selector for the following:

<div  
        data-id="DataType">
    <div >
        <header><h3 >Data Type</h3></header>
        <div ><p>Choose Your Desired Data Type!</p></div>
        <footer><ul >
            <li><a >Close</a></li>
            <li><a >Next</a></li></ul>
        </footer>
    </div>
</div>

Fields of Interests: shepherd-step / data-id="DataType" / shepherd-button-example-primary

but I have a knowledge gap to handle it with JQuery

I tried something like this: .shepherd-step[data-id="DataType"] > .shepherd-button-example-primary

to address [data-id="DataType"] working fine, but I want the button and not the whole div

CodePudding user response：

Remove the > from your selector so it becomes:

.shepherd-step[data-id="DataType"] .shepherd-button-example-primary

The use of the Child Combinator > means that the button must be a direct child of the shepherd-step div. This is the reason it did not work. By removing the child combinator, you're using the Descendent Combinator, and the button is a descendent of the div; therefore, the button will be found.

CodePudding user response：

It is pretty simple to do you just have to use $("CSS selector") you can use all the CSS selectors in jquery to select a certain element from DOM.

**Here is this example I changed the text of both the buttons using jQuery **

$(".shepherd-button-secondary").text("Changed From Script Close Button");
$(".shepherd-button-example-primary").text("Changed From Script Next Button");

<div>
<div >
        <header><h3 >Data Type</h3></header>
        <div ><p>Choose Your Desired Data Type!</p></div>
        <footer><ul >
            <li><a >Close</a></li>
            <li><a >Next</a></li></ul>
        </footer>
    </div>
</div>


<!-- Importing the Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>