There is such a layout with radio buttons

<ul> <li> <span class="pistons">4<br/>цилиндра</span> <b>220 000</b> <input name="group1" type="radio" id="test1" class="with-gap" checked="" value="220 000"/> <label for="test1">&nbsp;</label> </li> <li> <span class="pistons">6<br/>цилиндров</span> <b>280 000</b> <input name="group1" type="radio" id="test2" class="with-gap" value="280 000"/> <label for="test2">&nbsp;</label> </li> <li> <span class="pistons">8<br/>цилиндров</span> <b>350 000</b> <input name="group1" type="radio" id="test3" class="with-gap" value="350 000"/> <label for="test3">&nbsp;</label> </li> </ul>

When I click the button, I want to get the value of the span class = "pistons" with the radio button selected. I do like this

 $(".order_lovato").click(function () { var $this = $('input[name=group1]:checked'); var itemBox = '.pistons'; var $thisItem = $this.closest(itemBox); console.log($thisItem.html()); });

But does not work. what could be the problem?

  • There is a layout in which there is no button. When you press a certain button, you can do nothing, because it is impossible to click on something that does not exist. - Qwertiy ♦
  • @Qwertiy vacuous truth, this task is performed by any code, including its complete absence. %) - D-side
  • @ D-side, I had to add a link to the minimum reproducible example there :) - Qwertiy ♦

5 answers 5

 $this.siblings('.pistons');

try

  • var itemBox = '.pistons'; var $ thisItem = $ this.closest (itemBox); isn't that the same thing? - duddeniska
  • you select all .pistons and .closest () of the nearest suitable ancestor. And how will he choose the closest ancestor if they are all in a change? Sampling goes on dom as I understand And then I didn’t notice you don’t need an ancestor, but siblings I have already answered you another question as something like $ this.siblings (itemBox); need to. - Sergalas

There are many ways to get an element using jquery .

Read the jquery selectors documentation. You need to know this anyway.

Here is one of them.

A live example of jsfiddle .

 $(document).ready(function() { $('#getPriceBtn').click(function() { console.log('id', $('input:checked').attr('id')); console.log('price', $('input:checked').parent().find('b').text()); }); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div> <div> <ul> <li> <span>4<br/>цилиндра</span> <b>220 000</b> <input name="group1" type="radio" id="test1" class="with-gap" checked/> <label for="test1">&nbsp;</label> </li> <li> <span>6<br/>цилиндров</span> <b>280 000</b> <input name="group1" type="radio" id="test2" class="with-gap" /> <label for="test2">&nbsp;</label> </li> <li> <span>8<br/>цилиндров</span> <b>350 000</b> <input name="group1" type="radio" id="test3" class="with-gap" /> <label for="test3">&nbsp;</label> </li> </ul> <button id="getPriceBtn"> get Price </button> </div> </div> 

     $('ul li input').on( 'click', function() { $(this).siblings('b').html(); });

    only then do not forget to bring the number. Although I would not organize it. Acted through attributes. And the <b> tag on the w3c.org deprecated documentation

      Helped so

       var $this = $('input[name=group2]:checked'); var itemBox = '.pistons'; var $thisItem = $this.siblings(itemBox).text(); 
         $(".order_lovato").click(function () { var thiss = $('input[name=group1]:checked'); var tmp = thiss.parent().find('.pistons').html(); console.log(tmp); });

        add to HTML

         <button class="order_lovato"> dsfgfrfs </button>