Question

我有两种不同的HTML结构，我无法更改它们。现在我需要编写一个jQuery代码来获取其中一个特定href的{{1}}属性。这是我的代码：

＆＃13;

<a>

＆＃13;

$(document).on('click', '.myclass', function(e){
  e.preventDefault(e);
  
  var url = $(this).attr('href');
  console.log(url);
  
  $(this).closest('li').css('background-color','#f1f1f1');
})

＆＃13;

li{
  border: 1px solid gray;
}

a{
  display:block;
}

.myclass{
    cursor: pointer;
}

＆＃13;

好的，让我解释一下。当用户点击<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> HTML1: <ul> <li> <a href="#">sth</a> <span>something</span> <a class="myclass" href="./my/path">link</a> </li> </ul> <hr /> HTML2: <ul> <li class="myclass"> <a href="./my/path"> <span>something</span> </a> <div>sth</div> </li> </ul>元素时，我希望发生两件事情：（如您所见，.myclass元素在两个HTML结构中有所不同）

将浅灰色设置为.myclass。
在控制台中打印链接的li值。

我的当前代码适用于第一个HTML结构（但不适用于第二个）。

注意：对于第二个，jQuery代码应如下所示：

href

请参阅？我已添加$(document).on('click', '.myclass', function(e){ e.preventDefault(e); var url = $(this).find('a').attr('href'); console.log(url); $(this).css('background-color','#f1f1f1'); }) （第二种HTML中总有一个find('a') 并已移除<a>。

无论如何，我怎么能写一个jQuery代码而不是上面两个？

Answer 1

您可以使用http://localhost:8080/project/customers/customers_view#来测试当前元素的锚点，并继续使用.is()来定位LI元素。

针对选择器，元素或jQuery对象检查当前匹配的元素集，如果这些元素中至少有一个与给定的参数匹配，则返回true。

$(document).on('click', '.myclass', function(e) {
    e.preventDefault(e);
    var url;
    if ($(this).is('a')) {
        url = $(this).attr('href');
    } else {
        url = $(this).find('a').attr('href');
    }
    console.log(url);

    $(this).closest('li').css('background-color', '#f1f1f1');
});

$(document).on('click', '.myclass', function(e) {
  e.preventDefault(e);
  var url;
  if ($(this).is('a')) {
    url = $(this).attr('href');
  } else {
    url = $(this).find('a').attr('href');
  }
  console.log(url);

  $(this).closest('li').css('background-color', '#f1f1f1');
})

li {
  border: 1px solid gray;
}

a {
  display: block;
}

.myclass {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML1:

<ul>
  <li>
    <a href="#">sth</a>
    <span>something</span>
    <a class="myclass" href="./my/path">link</a>
  </li>
</ul>

<hr /> HTML2:

<ul>
  <li class="myclass">
    <a href="./my/path">
      <span>something</span>
    </a>
    <div>sth</div>
  </li>
</ul>

然而，使用单独的事件处理程序

会更清晰

$(document).on('click', 'a.myclass', function(e){  
  var url = $(this).attr('href');
})
$(document).on('click', 'li.myclass', function(e){  
  var url = $(this).find('a').attr('href');
})

Answer 2

使用背景的css规则

会更清晰

＆＃13;

$(document).on('click', '.myclass', function(e){
  e.preventDefault(e);
  var $el = $(this),
    //if this is <a> tag use it for href, otherwise find it
    $link = $el.is('a') ? $el : $el.find('a:first'),
    url = $link.attr('href');
    
  $el.closest('li').toggleClass('active');
  console.log(url);
 
})

＆＃13;

li{
  border: 1px solid gray;
}

a{
  display:block;
}

.myclass{
    cursor: pointer;
}

li.active, .myclass.active{
  background-color:#f1f1f1
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML1:

<ul>
  <li>
    <a href="#">sth</a>
    <span>something</span>
    <a class="myclass" href="./my/path">link</a>
  </li>
</ul>

<hr />

HTML2:

<ul>
  <li class="myclass">
    <a href="./my/path">
    <span>something</span>
    </a>
    <div>sth</div>
  </li>
</ul>

＆＃13;

Answer 3

我对手头的问题不太清楚，但尝试了这个

$(document).on('click', '.myclass', function(e){
{
    e.stopPropagation();
    var x='';
    if(evt.target.tagName=="LI")
    {
        x = $(this).find('a.myclass').attr('href');
        $(this).css('background-color', '#f1f1f1');
    } 
    else if(evt.target.tagName=="A")
    {
        x =  $(this).attr('href');
        $(this).parent("li").css('background-color', '#f1f1f1');
    }
    console.log(x);
});

Answer 4

这可以通过多种方式完成，包括检查标记的类型，一直到应用数据属性，然后根据我们在点击的类上检查它们。

在这个例子中，我们会检查它是否有一个＆＃39; href＆＃39;标签

我已经在每个if（）中留下了单独的背景颜色设置器，以防您希望在某些时候将它们更改为不同的值。

这是我的看法：

 $(document).ready(function() { 

  $('.myclass').click(function(e) {
  e.preventDefault();
   var url;

    if($(this).attr("href")) { //WE check if the "href" attribute exists
      //Found, it must be an link
      url = $(this).attr('href');
      console.log(url);
      $(this).closest('li').css('background-color','#f1f1f1');

    } else {
      //Not found
       url = $(this).find('a').attr('href');
       console.log(url);
       $(this).css('background-color','#f1f1f1');

    }

  });

});

如何在两种不同的HTML结构中选择特定标签？

4 个答案: