Question

我正在处理我网站的放大和缩小部分。我面临的问题是我无法通过<div>获取class=product-view。

以下是我的HTML代码：

<div id="tabs-1" aria-expanded="true" aria-hidden="false">
  <div class="drag-drop-box ui-droppable">
    <div class="component ui-draggable dropped" style="position: relative;">
       <div class="product-view">
           <a href="#"><span>C</span> us-east-1c</a>
       </div>
     </div>
   </div>
 </div>

这是我使用的Jquery代码：

$("#zin").click(function(){
  var wid = $('div[aria-hidden="false"]').width();
  var getid = $('div[aria-hidden="false"]').attr('id')
  alert(wid);
  alert(getid);
  $('#'+getid > div > div).children('.product-view').css('width','90px');
});

有人可以建议为达到目的而需要做些什么吗？感谢

Answer 1

尝试使用+连接您的选择器：

$('#' + getid + '> div > div').children('.product-view').css('width','90px');

或者您可以使用 .find() ：

来缩短选择器

$('#'+ getid).find('.product-view')

Answer 2

将字符串连接到选择器的方式是错误的，请尝试，

$('#'+getid + '> div > div').children('.product-view').css('width','90px');

我建议您在上下文中使用.find()。

尝试，

$('#'+ getid).find('.product-view')

或使用后代选择器，

$('#'+ getid + " .product-view")

Answer 3

不仅仅是：

$('div[aria-hidden="false"] .product-view').css('width','90px');

Answer 4

HTML＆GT;

<div id="tabs-1" aria-expanded="true" aria-hidden="false">
  <div class="drag-drop-box ui-droppable">
    <div class="component ui-draggable dropped" style="position: relative;">
       <div class="product-view">
           <a href="#"><span>C</span> us-east-1c</a>
       </div>
     </div>
   </div>
 </div>
<input type="button" id="zin" value="zoom in"/>
<input type="button" id="zout" value="zoom out"/>

CSS＆gt;

.product-view{
    border:1px solid black;
    font:bold 12pt 'Tahoma';
    display:table;
}
.product-view.expanded{
    font:bold 24pt 'Tahoma';
}

JQuery＆gt;

    $("#zin").click(function(){
      var wid = $('div[aria-hidden="false"]').width();
      var getid = $('div[aria-hidden="false"]').attr('id')

    $('#'+getid + '> div > div').children('.product-view').addClass('expanded');

    });
$("#zout").click(function(){
      var wid = $('div[aria-hidden="false"]').width();
      var getid = $('div[aria-hidden="false"]').attr('id')

    $('#'+getid + '> div > div').children('.product-view').removeClass('expanded');

    });

选择第n级子级来操纵DIV的宽度

4 个答案: