get text of a span inside a div - Jquery

Question

get text of a span inside a div - Jquery

Navigation

#1 by (0 votes)

0

HTML

<div id="mdCalendar-body" class="mdCalendar-body">
<table class="cal-table">
<thead><tr><td class="days-title">L</td><td class="days-title">M</td><td class="days-title">M</td><td class="days-title">J</td><td class="days-title">V</td><td class="days-title">S</td><td class="days-title">D</td></tr></thead>


<tbody class="bodyCalendartable">
    <tr>
        <td class="day not-day" data-month="10" data-year="2018" data-day="01" data-maxday="3">
        <label>1</label>
        <span class="precio">3,879</span>
        <span class="llegada">Llegada</span>
        <span class="final">Salida</span>
        </td>
    </tr>
</tbody>    
</table>
</div>

Javascript

$('body').on('mouseover', '.day', function () {
            rangeDatePaquete("#MDcalendar-container", $(this));

        });




var rangeDatePaquete = function (id, x) {
        var koin = $(id).find(".cal-table").find(".bodyCalendartable");

        var fday = getDate(x.attr("data-day") + "/" + x.attr("data-month") + "/" + x.attr("data-year"));
        var mxd = x.attr("data-maxday");/// recupera el valor de dias que contempla

        koin.find(".day,.day-old").removeClass("dateHover").removeClass("dateHoverEnd").removeClass("dateHoverDanger").removeClass("dateHoverStart").removeClass("base-cHover").removeClass("base-bHover");// limpia
        if (!x.hasClass("not-day")) {
            var type = x.attr("class");
            var res = type.split(" ");
            console.log(res[1]);

        }
    }

In the rangeDate function, I want to retrieve the text that has the span. price, I know it's by jquery selectors, I tried this in the rangeDate function

var price = $(x+"> span.precio").text();

but it does not work for me and I think it's because of the syntax that I'm not writing correctly

jquery selectores

asked by Ernesto Emmanuel Yah Lopez 26.10.2018 в 17:00

source

1 answer

Return Related Model fields in JSON - DjangoRestFramework HOW CAN I FILTER BY DATES TO SHOW THE DATA ACCORDING TO THE RANK?

score 0 · Accepted Answer

As I see it, x contains the element where the event mouseover is made which is the <td> with the class day , when you try to get the class in this way:

var price = $(x+"> span.precio").text();

x returns the full object day . So, if you want to get the class it would be this way (you must prevent when the element has more than one class, you must concatenate the classes with points):

price = $("."+x.attr('class').split(/[ ,]+/).join('.')+"> span.precio").text();

the selector would be something like this:

.day.not-day > span.price

Another way to do it is with children:

var price = x.children("span.precio").text();

$('body').on('mouseover', '.day', function() {
  rangeDatePaquete("#MDcalendar-container", $(this));
});

var rangeDatePaquete = function(id, x) {
    var price = x.children("span.precio").text();
    console.log("con children: "+price);
    
    price = "";
    price = $("."+x.attr('class').split(/[ ,]+/).join('.')+"> span.precio").text();
    console.log("con class: "+price);


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mdCalendar-body" class="mdCalendar-body">
  <table class="cal-table">
    <thead>
      <tr>
        <td class="days-title">L</td>
        <td class="days-title">M</td>
        <td class="days-title">M</td>
        <td class="days-title">J</td>
        <td class="days-title">V</td>
        <td class="days-title">S</td>
        <td class="days-title">D</td>
      </tr>
    </thead>


    <tbody class="bodyCalendartable">
      <tr>
        <td class="day not-day" data-month="10" data-year="2018" data-day="01" data-maxday="3">
          <label>1</label>
          <span class="precio">3,879</span>
          <span class="llegada">Llegada</span>
          <span class="final">Salida</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>